【簡単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を追加する事でスクロールバーを非表示にする事が出来ます。
以上で解決です。
まとめ
スクロールバーはブラウザによってスタイル・挙動が変わるのでやっかいです。
デフォルトのスクロールバーを非表示にして、自分で全ブラウザ共通デザインのスクロールバーを実装したい方はこちらの記事を参考にしてみてください。
以上で解説を終わります。
目次