「overflow: scroll;」の下のスクロールバーを消す方法

CSS

今回は、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;」と続けて入力することで、下部に表示される水平スクロールバーを消すことができる。

「overflow-x」プロパティは、「overflow」プロパティの左右のはみ出し部分の表示の状態を設定する役割を持っている。

これを「hidden」、ようするに「切り取ったときにあふれた部分は隠す」と設定することで、左右にはみ出した要素は表示されなくなる。左右にはみ出した要素を表示しないのであれば、水平スクロールバーの存在も必要なくなるので、水平スクロールバーが消えるというわけだ。

このプロパティの設定は、主にモバイル表示のときのサイドバーや、スクロール追従する目次などをカスタマイズする際は忘れないようにしておこう。

特に、Cocoonのモバイルメニューのフッターモバイルボタンから表示するサイドバーは、水平スクロールバーが表示されたままになっているので、忘れずに設定しておくようにしておこう。

垂直スクロールバーを消す場合

右に表示されるスクロールバーを消したいときは、「overflow: scroll;」のすぐ下にこのようなプロパティを入力する。

垂直スクロールバーを消したいときのCSSコード
.hoge {
	overflow: scroll;
	overflow-y: hidden;
}

上のコードのように、「overflow: scroll;」のすぐ下に「overflow-y: hidden;」と続けて入力することで、右側に表示される垂直スクロールバーを消すことができる。

「overflow-y」プロパティは、「overflow」プロパティの上下のはみ出し部分の表示の状態を設定する役割を持っている。

これを「hidden」、ようするに「切り取ったときにあふれた部分は隠す」と設定することで、上下にはみ出した要素は表示されなくなる。上下にはみ出した要素を表示しないのであれば、垂直スクロールバーの存在も必要なくなるので、垂直スクロールバーが消えるというわけだ。

このプロパティの設定は、表などの横の長さを取るが縦の長さは関係ない要素に使うといいだろう。

特に、画面サイズがどんな大きさでも同じものを表示する「レスポンシブデザイン」を意識する場合、表の横のサイズを崩したくないときは忘れずに設定しておこう。


今回は、scrollを指定したときに表示される不要なスクロールバーを消す方法を忘備録的に書き留めておいた。

この記事が役に立てばうれしい。