CSSのoverflow:scrollで横スクロールバーを消す方法

2020年05月05日

この記事は約1分で読めます。

CSSで「overflow:scroll」を指定した時、縦だけでいいのに横にもスクロールバーが出てくる。
この少しイヤな横スクロールバーを全ブラウザで消す方法の紹介です。

CSS

.demo {
  overflow-x: hidden;
  overflow-y: scroll;
  // または
  overflow: hidden scroll;
}

「overflow: hidden scroll」についてちょっとだけ。
「overflow」に値を2つ入れる場合、最初が横(X軸)で最後が縦(Y軸)を指定する。
入れる値が１つだけの場合は、縦、横両方に対して同じ値を指定することになる。
「overflow: scroll」をすると、縦、横がスクロールすることになるから、どちらもスクロールバーが出ちゃうんだ。