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

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

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

スライド1

スライド2

スライド3

スライド4

スライド5

スライド6

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

1
.hide-scrollbar {
2
  /* for modern browsers */
3
  scrollbar-width: none;
4

5
  /* for IE, legacy Edge */
6
  -ms-overflow-style: none;
7
}
8
/* for legacy webkit/blink browsers */
9
.hide-scrollbar::-webkit-scrollbar {
10
  display: none;
11
}

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