今回は、CSSのoverflowプロパティでscrollを設定したとき、下に表示される水平バーを消す方法を書き留めておく。
また、右側に表示される垂直バーを消す方法も同時に紹介する。
「overflow: scroll;」のおさらい
「overflow: scroll;」とは、要素の横の長さである「width」・縦の長さである「height」を指定したとき、そこからはみ出した部分をスクロールで表示する設定である。
例としてはこのようなものだ。
上に表示したデモのように、指定した要素の範囲からあふれた文章も、スクロールすることですべて読むことができるのがわかっただろうか？
しかし、ただ「scroll」と設定しただけでは、このように必要のないものにもスクロールバーが表示されてしまう。
上のデモで必要なスクロールは、垂直スクロールバーだけでよい。しかし、水平スクロールバーまでもが表示されてしまっている。
この場合の水平スクロールバーは不必要だし、見栄えも悪い。
今回は、目次や新着記事要素などを「overflow: scroll;」でスクロール表示にした際に、表示する必要のないスクロールバーを消す方法を紹介したい。
「overflow: scroll;」で表示される不要なスクロールバーを消す方法
それでは、不必要なスクロールバーを消す方法を解説したい。
「overflow: scroll;」のすぐ下にあるプロパティを付け足すだけですぐにできる。
水平スクロールバーを消す場合
下に表示されるスクロールバーを消したいときは、「overflow: scroll;」のすぐ下にこのようなプロパティを入力する。
水平スクロールバーを消したいときのCSSコード
.hoge {
overflow: scroll;
overflow-x: hidden;
}
上のコードのように、「overflow: scroll;」のすぐ下に「overflow-x: hidden;」と続けて入力することで、下部に表示される水平スクロールバーを消すことができる。
このプロパティの設定は、主にモバイル表示のときのサイドバーや、スクロール追従する目次などをカスタマイズする際は忘れないようにしておこう。
特に、Cocoonのモバイルメニューのフッターモバイルボタンから表示するサイドバーは、水平スクロールバーが表示されたままになっているので、忘れずに設定しておくようにしておこう。
垂直スクロールバーを消す場合
右に表示されるスクロールバーを消したいときは、「overflow: scroll;」のすぐ下にこのようなプロパティを入力する。
垂直スクロールバーを消したいときのCSSコード
.hoge {
overflow: scroll;
overflow-y: hidden;
}
上のコードのように、「overflow: scroll;」のすぐ下に「overflow-y: hidden;」と続けて入力することで、右側に表示される垂直スクロールバーを消すことができる。
このプロパティの設定は、表などの横の長さを取るが縦の長さは関係ない要素に使うといいだろう。
特に、画面サイズがどんな大きさでも同じものを表示する「レスポンシブデザイン」を意識する場合、表の横のサイズを崩したくないときは忘れずに設定しておこう。
今回は、scrollを指定したときに表示される不要なスクロールバーを消す方法を忘備録的に書き留めておいた。
この記事が役に立てばうれしい。
