CSSでスクロールバーを表示しないようにするには？

CSSでスクロールバーを表示しないようにするにはどうすればいいですか？

Webページのデザインにおいて、スクロールバーは標準で表示されますが、デザインによっては非表示にしたい場合があります。この記事では、CSSを使ってスクロールバーを非表示にする方法を解説します。

::-webkit-scrollbarを使った非表示方法

ChromeやSafariなどのWebKit系のブラウザでは、疑似要素「::-webkit-scrollbar」を使ってスクロールバーのスタイルをカスタマイズすることができます。これを利用して、スクロールバーを非表示にすることができます。

<style>
  ::-webkit-scrollbar {
    display: none;
  }
</style>

このCSSを適用すると、スクロールバーが非表示になります。

スクロールバーの非表示方法は、ブラウザによって対応状況が異なります。以下の表に、主要なブラウザの対応状況を示します。

ブラウザ	::-webkit-scrollbar	その他
Chrome	対応
Safari	対応
Firefox	非対応	スクロールバーをカスタマイズする独自の方法があります
Edge	対応
Internet Explorer	非対応	スクロールバーを非表示にすることはできません

Firefoxでは、「::-webkit-scrollbar」は非対応ですが、スクロールバーをカスタマイズする独自の方法があります。Internet Explorerでは、スクロールバーを非表示にすることはできません。

スクロールバーを非表示にすると、ユーザーがスクロールできないように見えるため、コンテンツがスクロール可能であることを示す必要がある場合があります。例えば、ページネーションを追加したり、スクロールできることを示す矢印を表示したりするなどの対策が必要です。

* [MDN Web Docs: ::-webkit-scrollbar](https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-scrollbar)