Written by Kasumi

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

使用ブラウザによって、スクロールバーの見え方が違うので非表示にしたい。

CSSを使って非表示にする方法を知りたい。

Chrome・Safari・Firefox・IE・Edgeブラウザで非表示にしたい。

本記事ではこのような悩みを解決します。

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

    .scrollbar {
      -ms-overflow-style: none; /* IE, Edge 対応 */
      scrollbar-width: none; /* Firefox 対応 */
    }
    .scrollbar ::-webkit-scrollbar {
      /* Chrome, Safari 対応 */
      display: none;
    }

上記CSSを追加する事でスクロールバーを非表示にする事が出来ます。

以上で解決です。

まとめ

スクロールバーはブラウザによってスタイル・挙動が変わるのでやっかいです。

デフォルトのスクロールバーを非表示にして、自分で全ブラウザ共通デザインのスクロールバーを実装したい方はこちらの記事を参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
830
WordPress プログラミング

投稿の一覧ページで、過去記事を一番先頭に持ってくる方法【ワードプレス】

2019.11.29
338
プログラミング

【htaccess】ディレクトリ配下をドキュメントルート基準にして読ませる方法【テストサイト】

2020.03.25
732
WordPress プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
2040