ブラウザ共通。CSSでスクロールバーを消す方法

overflow: scrollなどで要素をスクロールさせたいときなどあると思いますが、スクロールバーがテキストにかかってしまって見にくいとか、デザイン的に邪魔とか、いろいろ思うところがあると思います。

See the Pen
textbox-with-scrollbar by eta (@0eta0)
on CodePen.

具体的には、こういったCSSを当てることで消すことはできるようなのですが、副作用的なやつもあるようです。

.scroll {
 -ms-overflow-style: none; /* IE */
 overflow: -moz-scrollbars-none; /* Firefox */
}
.scroll::-webkit-scrollbar { /* Google Chrome */
 display: none;
}

今回紹介する方法は、言わずとしれた、overflow: hiddenで無理やり非表示にする、Tips的な方法です。

今回つくるもの

スクロールしてみるとわかるかと思いますが、スクロールバーが表示されないと思います。

See the Pen
textbox-without-scrollbar by eta (@0eta0)
on CodePen.

詳細

仕組み

仕組みとしては簡単で、内側の要素を外側の要素よりもスクロールバー分大きくして、外側の要素からはみ出した分を表示しないとしているだけです。

.box {//外側の要素
...
  overflow-y: hidden;
}

.inner-text {//内側の要素
...
  overflow-x: scroll;
}

これを使えば、X, Y軸ともに同じ手法を取ることができます。

ただデメリットもあって、サイズが動的に変わる場合(文字数によって高さが変わる場合)には適用できません。
その場合には、最初に書いた方法でやるのが無難かと思います。