CSSでスクロールさせつつ、スクロールバーを非表示（隠す）にする方法

CSSでスクロールさせつつ、スクロールバーを隠す（非表示）にする方法について説明します。

CSSでスクロールバーのデザインを、ブラウザデフォルトのデザインからオリジナルデザインに変更したいときは「-webkit-scrollbar」を使うとデザインを変更することができますが、webkit系のブラウザしか対応していないので、FireFoxやIEではデフォルトデザインのままです。

全てのブラウザで統一性のあるデザインにしたいと思ったら、領域をスクロールさせつつ、スクロールバーを非表示（隠す）にする方法が解決策になるかと思います。

[デモ] CSSでスクロール領域を保ちつつスクロールバーを非表示（隠す）方法

See the Pen CSSでスクロール領域を保ちつつスクロールバーを非表示（隠す）方法 by ayukat (@ayukat) on CodePen.

CSSの解説

.scrollWrap {
  width: 330px;
  margin: 20px auto;
  overflow: hidden;
}
.scrollContent {
  overflow-y: scroll;
  width: calc(100% + 17px);
  height: 300px;
  background: #fff;
}
.scrollContent ul li {
  padding: 20px
}

CSSはたいして新しいことはしていません。

まずはスクロール領域を作る

まずはじめにスクロールさせたい領域（デモで言うと.scrollContent）に高さを指定し、「overflow-y: scroll;」でスクロールバーを出現させます。

ここまではスクロールバーを表示させるやり方です。

スクロールバーの幅を含めた横幅を指定する

そして今回の重要な部分になりますが、「width: calc(100% + 17px);」でスクロールさせたい領域の横幅を指定します。

「calc」というのは括弧で囲った値を計算してくれる便利な値です。

ここでは横幅100%に17pxプラスという計算式を指定します。

なぜ17pxなのかと言うとスクロールバーの横幅が17pxだからです。

スクロール領域の親要素の横幅を指定してそれ以外は非表示にさせる

最後にスクロールさせたい領域の親要素（デモで言うと.scrollWrap）の横幅を指定し、「overflow: hidden;」で指定した横幅からはみ出た部分を非表示にさせます。

例えばスクロールさせたい領域の親要素（.scrollWrap）の横幅を330pxに指定したら、その子要素となるスクロールさせたい領域（.scrollContent）は、330pxをはみ出た部分に関しては非表示になります。

つまり先ほどスクロールさせたい領域に「width: calc(100% + 17px);」を指定した理由は、スクロールバー部分（17px）をわざと親要素からはみ出させて非表示にするためです。

まとめ

これでスクロールさせつつ、スクロールバーを非表示することができます。

全てのブラウザでスクロールバーをオリジナルデザインに装飾することは、まだできないようなので、デザインの統一性を維持させたい場合は、スクロールバーを非表示にさせる方法などがあります。