備忘録

【CSS】スクロールバーを非表示にする方法

  /

PC向け主要ブラウザにおいて、ウィンドウ右端に表示されるスクロールバーを非表示にする方法についてです。

スクロールそのものができなくなるわけではありません。

Contents
  1. デモ
  2. コピペ用まとめ
  3. スクロールバーを非表示にする方法
  4. 各種ブラウザのバージョン

デモ

デモページ

コピペ用まとめ

html{
    -ms-overflow-style: none;  /* IE, Edge(Legacy) */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar{
    display:none;  /* Chrome, Edge, Safari, Opera */
}

※ここでは、Edge(Legacy)およびIE用の記述は、htmlタグに対して書いています。

スクロールバーを非表示にする方法

各種ブラウザに合わせて、いくつかの記述を併用する必要があります。

Chrome, Edge(Chromium), Operaの場合

※Safariもこの記述で非表示にできるようです。

body::-webkit-scrollbar{
    display:none;
}

Firefoxの場合

html{
    scrollbar-width: none;
}

bodyタグではなく、htmlタグに対して適用するように気を付けてください。

bodyタグに対して記述するように解説されているサイト様が多かったですが、それではスクロールバーを非表示にすることはできませんでした。

(もし何かの勘違いでしたら、ご指摘いただけると幸いです。)

Edge(Legacy), IEの場合

body{
    -ms-overflow-style: none;
}

なお、こちらはbodyタグに対して適用していますが、htmlタグに対して記述しても、問題なく非表示にすることは可能でした。

各種ブラウザのバージョン

以下のバージョンで確認を行いました。

  • Chrome：85
  • Firefox：80
  • Edge(Chromium)：84
  • Edge(Legacy)：44
  • IE：11
  • Opera：70

ちなみに、OSはWindows10です。(なのでSafariは未確認)

CSS
こんな記事もおすすめ