231 文字
1 分

スクロール領域はそのままにスクロールバーを隠す

2023-02-20

モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。

次はscrollbar-width: noneを使用してスクロールバーを隠したデモ。有効な環境であれば、スクロールバーが消えているがスクロール領域は存在するため、例えば方向キーなどで操作は可能。

スライド1
スライド2
スライド3
スライド4
スライド5
スライド6

モダンでないブラウザの場合もサポートする場合は、次のように指定すれば良い。

.hide-scrollbar {
/* for modern browsers */
scrollbar-width: none;
/* for IE, legacy Edge */
-ms-overflow-style: none;
}
/* for legacy webkit/blink browsers */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}

次は古いブラウザもサポートしたデモ。

スライド1
スライド2
スライド3
スライド4
スライド5
スライド6
スクロール領域はそのままにスクロールバーを隠す
https://blog.ohirunewani.com/posts/css-hide-scrollbar/
作者
hrdtbs
公開日
2023-02-20
ライセンス
CC BY-NC-SA 4.0