overflow: scroll; を設定した要素に表示される、ブラウザのスクロールバーを非表示にする方法

overflow: scroll; を設定した要素に表示される、ブラウザのスクロールバーを非表示にする方法
この記事をシェアする:
「overflow: scroll; を設定した要素」に表示される、
「ブラウザデフォルトのスクロールバー」。
これを非表示にしたい、というケース。
こういったご要望が、実際のWeb制作の現場でも時々出てくることがあります。

今回は手短にですが、その方法について書いていきたいと思います。

結論から。ブラウザごとに対応するcssプロパティ3つを記述するだけ。

早速、「overflow: scroll; を設定した要素」に表示される、「ブラウザデフォルトのスクロールバー」
を非表示にしたい場合のコードです。
次の様に指定します。

.my-container {
  border: 1px solid #ebebeb;
  height: 300px;
  margin: 2rem auto;
  -ms-overflow-style: none;
  overflow: scroll;
  scrollbar-width: none;
  width: fit-content;
}
.my-container::-webkit-scrollbar {
  display: none;
}

↑上記の様に、なんらかの要素を包括するコンテナ .my-container があったとします。
この要素が内包する要素のheightが300pxを超えると、6行目で指定している通り、
スクロールバーが出ることになります。

このスクロールバーを消したい場合。
5、7、そして10〜12行目に注目してください。

-ms-overflow-style: none;
scrollbar-width: none;

↑こちら、上から
-ms-overflow-style …Edge, IE系のブラウザに効きます。
scrollbar-width: none; …Firefox系のブラウザに効きます。

.my-container::-webkit-scrollbar {
  display: none;
}

↑こちらは Chrome や Safari 等、
webkit系のブラウザに効きます。

この3種類の記述をすることで、
「overflow: scroll; を設定した要素」に表示される、
「ブラウザデフォルトのスクロールバー」
を非表示にすることが可能です。

MDNによる解説ページ

上のセクションでご紹介したブラウザデフォルトのスクロールバーについての解説ページが、
ご存知、Web技術に関する優れたオンラインリファレンスサイト、MDNにあります。
scrollbar-width | MDN
::webkit-scrollbar | MDN
なお、MDNによれば
「この機能は非標準であり…(中略)…将来的に動作が変更される可能性があります」との注意書きがあります。
使用の際はその点に留意して使用する必要があります。

この記事のまとめ

今回は、「overflow: scroll; を設定した要素」に表示される、
「ブラウザデフォルトのスクロールバー」。
これを、非表示にする方法について書きました。

MDNの解説ページにも記載がありますが、
非表示にするだけではなく、限定的ではありますが、
色を変えたり、ちょっとした見た目の編集も可能ではあります。

ただし上のセクションでも書いた通り、
「この機能は非標準であり…(中略)…将来的に動作が変更される可能性があります」とのことですので、
使用の際はその点に留意することが必要です。

実際の現場で使用するケースのほとんどは
「ブラウザデフォルトのスクロールバー」を非表示にする、という用途が経験上、ほとんどです。

そして非表示にした上で、

(1). JavaScriptでその要素の高さを取得
(2). 取得した高さを100%と定義する
(3). スクロールイベントを監視して、100%分の何pxスクロールされたか
(4). 上記(3)の計算結果をもとに、バーの位置を移動させる

↑この仕組みをJavaScriptで実装しておけば、
独自のスクロールバーを提供することなども可能そうですね。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: