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

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

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

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

確認パターン

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

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

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

確認してみた

設定なし

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

scrollbar-width

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

src/styles.css

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

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

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

• scrollbar-width - CSS: カスケーディングスタイルシート | MDN

-ms-overflow-style

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

src/styles.css

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

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

-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以外のパターンでスクロールバーを非表示とできました。

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

• ::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

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;
}

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

参考

• [CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET

以上