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

今回は、CSSのoverflowプロパティをscrollに設定したときに表示されるスクロールバーの操作部分を消す方法を解説します。

横か縦のどちらかのスクロールは必要だけど、それ以外は表示する必要はないかなぁ……といったときに役に立つテクニックです。

「overflow: scroll;」についてのおさらい
垂直・水平スクロールバーを絶対に表示させないためには
- 水平スクロールバーを消す場合
- 垂直スクロールバーを消す場合
仕組みの解説
- 今回の要点
- 類似例
今回のポイント
最後に

「overflow: scroll;」についてのおさらい

始めに、「overflow」プロパティの「scroll」という値について、すこしおさらいをしていきましょう。

まず、ある要素に対して「overflow: scroll;」を設定した場合、以下のようになります。

hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge

このように、通常であれば要素内に到底収まりきらない内容でも、レイアウトやデザインを崩さず要素内に収めることができるのです。この場合であれば、到底デモ要素に入りきらないhogeだけの文字列が、縦方向にスクロール化されたことによってデモ要素から溢れることなく全文が収まりました。

このため、「overflow: scroll;」は要素に対して縦や横の長さを制限している場合によく使われるCSSとなっています。

ただ、以下の事にも気が付くと思います。

スクロールは縦方向だけで良いのに、下のスクロール部分も表示されてる……

つまり、先ほどのデモ要素は文章を折り返すように設定しているため、水平方向のオーバーフローを考慮する必要はありません。なので、横方向にスクロールする必要が無いため、そのスクロール操作部分も要らないというわけです。

ここまででわかるように、「overflow: scroll;」は適用した要素をスクロール化させるものであり、その後に出てくるスクロールバーの有無については個別に対応させてあげる必要があるというわけなんです。

垂直・水平スクロールバーを絶対に表示させないためには

それでは、実例を用いて解説を行っていきましょう。

「overflow: scroll;」のすぐ下にひと言付け足すだけで、簡単に実現することができます。

今回の解説では例として出すクラス名を「.hoge」としていますが、それ自体に意味はないです。一般的に日本のプログラミング文化では意味が無いものに対して「hoge」と名付ける慣習があります。

水平スクロールバーを消す場合

今回の記事の目的でもある「水平スクロールバーの非表示」を行いたい場合は、以下のようにしましょう。

CSS

.hoge {
  overflow: scroll;
  overflow-x: hidden;
}

こうすると、以下のようになります。

無事、水平スクロール操作部分を消すことができました。

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

逆に、垂直スクロールバーを非表示にしたい場合は、このようにします。

CSS

.hoge {
  overflow: scroll;
  overflow-y: hidden;
}

今度は垂直スクロール操作部分が消えているのが分かりますね。

仕組みの解説

それでは、先ほどの実例の解説を行います。

また先ほどのふたつのCSSプロパティには、より柔軟な値もありますので、それの紹介も行います。

今回の要点

さて、先ほどは以下のふたつのスタイルを使いました。

overflow-x: hidden;
overflow-y: hidden;

これらはそれぞれ「X軸方向（水平方向）」と「Y軸方向（垂直方向）」の溢れをどう処理するか？ということに関する設定になります。そして、ここで値を「hidden」とすると、それを「隠す」、つまりその方向に対する余剰部分を表示しないということになるわけなんです。

このため、「スクロールバーを消す」というよりは「スクロールの必要がある余剰部分を隠す」といった方が正しいのかもしれません。

また、ある方向へのスクロールが必要な要素に対して、誤った方向にhiddenを設定した場合はこのようになってしまいます。

この例だと、文章をすべて読むためには明らかに垂直方向へのスクロールが必要なのにoverflow-xをhiddenとしてしまったため、スクロールすることができなくなりました。

このように、不要なスクロール操作部分を消したい場合は、xとyの取り違えに注意が必要です。

類似例

今回は横もしくは縦のスクロールが「絶対に」いらない場合を想定したCSSを紹介していますが、必ずしもすべてがそうではないと思います。例えば、内包するコンテンツの量や大きさによって、スクロール表示の有無が自動で判別されてくれたら助かりますよね？

実は、今回紹介した「overflow-x」と「overflow-y」のふたつのCSSプロパティは、そういった値に設定することも可能です。

当サイトではその方法や使用例を記事にしておりますので、そちらもぜひご覧ください。

今回のポイント

さて、今回押さえておきたいポイントは以下の通りです。

水平スクロールを消す場合は「overflow-x: hidden;」

垂直スクロールを消す場合は「overflow-y: hidden;」

縦横どちらかのスクロールを消す場合はxとyに注意！

これらの3点を心掛けるようにしてください。

最後に

今回は、「overflow: scroll;」に設定した際に表示されるスクロール操作部分を消す方法についての解説を行いました。

スクロール操作部分は、要素をスクロール表示に設定した場合はその必要が無い場合でも常時表示されるようになっていますので、今回のように個別に設定してあげる必要があるんですね。

そうすることで、無意味なスクロールを消してWebサイトのデザインを整えることができるようになるというわけです。

それでは、また。