[CSS]Webアプリのスクロールバーを非表示にする

2021.09.27

こんにちは、CX事業本部 IoT事業部の若槻です。

現在開発しているWebアプリで、画面スクロール操作を行うユースケースがないため、スクロールバーを非表示としたいという要望がありました。

今回は、CSSでWebアプリのスクロールバーを非表示にする(スクロール中含む)方法を確認してみました。

確認パターン

CSSの設定は次のパターンを確認してみます。

  • 設定なし
  • scrollbar-width
  • -ms-overflow-style
  • ::-webkit-scrollbar

OSおよびブラウザは次のパターンで確認をします。

OS ブラウザ バージョン
Mac Google Chrome 93.0.4577.82(Official Build)(x86_64)
同上 Safari 14.0.1 (15610.2.11.51.10, 15610)
同上 Firefox 92.0.1 (64 ビット)
Windows 10 Google Chrome 94.0.4606.61(Official Build)(x86_64)
同上 Microsoft Edge 94.0.992.31(公式ビルド)(64ビット)
同上 Firefox 92.0.1 (64 ビット)

確認してみた

設定なし

設定なしの場合は全てのパターンでスクロールバーが表示されます。

OS ブラウザ 非表示
Mac Chrome ×
同上 Safari ×
同上 Firefox ×
Windows Chrome ×
同上 Edge ×
同上 Firefox ×

scrollbar-width

CSSファイルにscrollbar-width: noneを追加します。

src/styles.css

body {
  font-family: sans-serif;
  scrollbar-width: none;
}

全てのパターンでスクロールバーを非表示とできませんでした。

OS ブラウザ 非表示
Mac Chrome ×
同上 Safari ×
同上 Firefox ×
Windows Chrome ×
同上 Edge ×
同上 Firefox ×

scrollbar-widthを使えば以前まではFirefoxのスクロールバーを非表示にする(幅をゼロとする)ことができるという情報がありましたが、現在はできないようです。

The scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown.
Firefox 64

-ms-overflow-style

CSSファイルにscrollbar-width: noneを追加します。

src/styles.css

body {
  font-family: sans-serif;
  -ms-overflow-style: none;
}

全てのパターンでスクロールバーを非表示とできませんでした。

OS ブラウザ 非表示
Mac Chrome ×
同上 Safari ×
同上 Firefox ×
Windows Chrome ×
同上 Edge ×
同上 Firefox ×

-ms-overflow-styleについても、使用すれば以前まではEdgeやIEのスクロールバーを非表示とできたようですが、現在はできないようです。MDNのページも消えていました。

Specify whether content is clipped when it overflows the element's content area.
Edge, IE 10

::-webkit-scrollbar

CSSファイルに::-webkit-scrollbarを使用した記述を追加します。

src/styles.css

body {
  font-family: sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

Firefox以外のパターンでスクロールバーを非表示とできました。

OS ブラウザ 非表示
Mac Chrome
同上 Safari
同上 Firefox ×
Windows Chrome
同上 Edge
同上 Firefox ×

::-webkit-scrollbarは有用でしたが、非標準であるため将来変更される可能性があり、本番環境などで使用しない方が良いとのことです。

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

まとめ

CSSを次のように設定すれば、Google Chrome、Microsoft Edge、Safariでスクロールバーを非表示とすることができました。将来的に使用できなくなる可能性はありますが、現状の選択肢はこれのようです。

src/styles.css

body {
  font-family: sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

スクロールバーを非表示としたいという要件は少なからずありそうですが、オープンウェブの仕様実装としては積極的でないように思えました。その理由としては、スクロールバーを非表示とすることがウェブアクセシビリティの観点から推奨はされていないということがありそうです。よって特段の事情が無い限りスクロールバーは表示する実装で良いかと思います。

参考

以上