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

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)

関連QA

**Q1: スクロールバーを非表示にしても、スクロールできるようにするにはどうすればいいですか？** A1: JavaScriptを使ってスクロールイベントを実装する必要があります。 **Q2: Firefoxでスクロールバーを非表示にするにはどうすればいいですか？** A2: Firefoxでは、「::-webkit-scrollbar」は非対応ですが、独自の方法でスクロールバーをカスタマイズすることができます。 **Q3: スクロールバーを非表示にすることは、アクセシビリティの観点から問題ないですか？** A3: スクロールバーを非表示にすると、ユーザーがスクロールできないように見えるため、アクセシビリティの観点からは推奨されません。コンテンツがスクロール可能であることを示す必要がある場合があります。

その他の参考記事:jquery done