CSS

スクロールバーを非表示にする(各ブラウザ対応)

今回やりたいこと

限られた高さを与えられた要素内のコンテンツをスクロールさせたい場合、そのコンテンツの親要素に対して「overflow-y: scroll;」というCSSを書きますよね。
そうした時に、ブラウザのデフォルトのダサいスクロールバーがそのエリア内に表示されてしまいます。

通常のブラウザの右側に表示されているスクロールバーが、さらにコンテンツ内だけにも表示されてしまうイメージです。

もちろん、ユーティリティ上必要な場合もあるかもしれませんが、今回はこれを削除するにあたって気を付けるべきことをまとめます。

CSS

chromeとSafari

ネットでググると、よく以下のようなコードを付け足すように促されます。


親要素::-webkit-scrollbar {
  display:none;
}

これはこれで問題ありません。これはchromeとSafari対応になります。つまりこれだけではFirefoxとIEへの対応ができていないんですね。

FirefoxとIE

記述する場所が若干違うので注意しましょう。

プロパティ名を覚えるのが面倒なので、今回は記事に残しましたが覚えてしまえば簡単です。


親要素 {
  height: 150px; // コンテンツの高さ
  overflow-y: scroll;
  -ms-overflow-style: none;    // IE, Edge
  scrollbar-width: none;       // Firefox
}

これでスクロールバーの非表示ができていることを確認できました。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2021/08/19 CSS

画像を縮小表示させた時に画像がぼやけてしまう問題

2020/04/14 CSS

IEでlabelタグ内の画像がクリックしても反応しない

2019/11/01 CSS

divでぐるぐる回転するボタンを作ってみた

2019/10/27 CSS

レスポンシブで正方形を維持させる