「ブラウザデフォルトのスクロールバー」。
これを非表示にしたい、というケース。
こういったご要望が、実際の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制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。