2019/08/13更新

[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>

実行サンプル

1
2
3
4
5
6
7
8
9
10

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



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擬似要素では表示制御以外に、スクロールバーのwidthheightを変えたり、色を変えたりもできます。詳細は「::-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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。