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によれば
「この機能は非標準であり…(中略)…将来的に動作が変更される可能性があります」との注意書きがあります。
使用の際はその点に留意して使用する必要があります。