Newly available 主要ブラウザで対応が進んでいるが、Safari 18.2以降が必要な点に注意。
スクロール Newly available

scrollbar-width

スクロールバーの幅を auto・thin・none の3段階で制御できる。WebKitの ::-webkit-scrollbar に代わる標準的な方法として策定された。thin を指定するとスクロールバーが細くなり、none で完全に非表示にできる。

スクロールカスタマイズ

概要

スクロールバーの幅を auto・thin・none の3段階で制御できる。WebKitの ::-webkit-scrollbar に代わる標準的な方法として策定された。thin を指定するとスクロールバーが細くなり、none で完全に非表示にできる。

対応ブラウザ

デスクトップ

Chrome 121+
Edge 121+
Safari 18.2+
Firefox 64+

モバイル

Chrome Android 121+
Safari iOS 18.2+
Firefox Android 64+

基本構文

CSS 
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
}

/* スクロールバーを非表示（スクロール自体は可能） */
.clean-scroll {
  overflow-y: auto;
  scrollbar-width: none;
}

実務での使いどころ

  • UIの洗練

    サイドバーやチャット欄のスクロールバーを細くして、デザインの邪魔にならないようにする。

注意点

  • scrollbar-width: none はスクロールバーが見えなくなるだけで、スクロール操作自体は可能。ただしユーザーがスクロール可能であることに気づけない可能性がある。
  • Safari 18.2未満では無効。古いSafariユーザーにはデフォルトのスクロールバーが表示される。

アクセシビリティ

  • scrollbar-width: none を使う場合、スクロール可能であることを視覚的に示す別の手段を提供する。

参考リンク