Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

CSSでスクロールさせたいけど、スクロールバーを非表示(隠す)にする方法

CSSでスクロールさせたいけど、スクロールバーを非表示(隠す)にする方法

画像出典:W3C

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

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

今回はCSSで領域をスクロールさせつつ、スクロールバーを隠す(非表示)にする方法について説明します。

 

目次

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

See the Pen CSSでスクロール領域を保ちつつスクロールバーを非表示(隠す)方法 by tak-kun (@tak-kun) 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)をわざと親要素からはみ出させて非表示にするためです。

まとめ

これでスクロールさせつつ、スクロールバーを非表示することができます。全てのブラウザでスクロールバーをオリジナルデザインに装飾することは、まだできないようなので、デザインの統一性を維持させたい几帳面な性格の人(私です)は、最終奥義としてスクロールバーを非表示にさせる方法をおすすめします。