[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応）

こんにちは、@yoheiMuneです。
今日は、CSSでスクロールバーを非表示にする方法をブログに書きたいと思います。

目次

まとめ

IE、Edge、Chrome、Safari、Firefox でスクロールバーを非表示にする実装方法はこちらです。

コード

<div class="container">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div>
<style>
    .container {
        height: 150px;
        overflow-y: scroll;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
    }
    .container::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }
</style>

実行サンプル

以降ではブラウザごとに、詳細を説明します。

IE、Edgeでスクロールバーを非表示にする

スクロールバーの制御は、ブラウザごとに行う必要があります。Internet Explorer と Edge の場合は、-ms-overflow-styleプロパティを利用します。

.container {
    overflow: scroll;
    -ms-overflow-style: none;  /* これを追加 */
}

-ms-overflow-styleに設定可能な値として、スクロール中のみスクロールバーを表示する-ms-autohiding-scrollbarなども存在します。詳細は「-ms-overflow-style | MDN」をご覧ください。

Chrome、Safariでスクロールバーを非表示にする

Chrome、Safariの場合、::-webkit-scrollbar擬似要素でスクロールバーを制御します。

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

::-webkit-scrollbar擬似要素では表示制御以外に、スクロールバーのwidthやheightを変えたり、色を変えたりもできます。詳細は「::-webkit-scrollbar | MDN」をご覧ください。

Firefoxでスクロールバーを非表示にする

Firefoxでスクロールバーを非表示にしたい場合、scrollbar-widthプロパティを利用します。

.container {
    scrollbar-width: none;
}

scrollbar-widthは2019年時点では、Firefoxのみで利用可能な試験的なプロパティのため、将来的にはなくなる可能性があります。使い方の詳細やブラウザサポート状況は「scrollbar-width | MDN」をご覧ください。

なお、overflow: -moz-scrollbars-none;と設定することでもスクロールバーを非表示にできますが、困った副作用として、スクロールもできなくなるという問題があります。

最後に

マークアップでスクロールバー制御をしたいこともしばしば。そんな時に検証済みのノウハウがまとまっていると良いなと思い、今回ブログにまとめました。今後も色々とノウハウをまとめて書けたらいいなと思います。

最後になりますが本ブログでは、フロントエンド、Python、インフラ、サーバー、PHP、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！