僕が自作しているWordPressテーマ「4536」の配布サイトに設置しているフォーラムで以前このような質問をいただきました。
メニューの下にスクロールバーのようなものが表示されているんですが、これは仕様でしょうか？
当初は「ん？何のことだろう？」と思っていたんですが、調べたところ、Windows環境でのみ表示されるスクロールバーだということが判明しました。
Windowsではoverflow-x:scrollやoverflow-y:scrollなどのoverflowプロパティを使うと、デフォルトでスクロールバーが表示されるようで、僕が自作しているテーマの横スクロールコンテンツがWindows環境でのみ意図しない表示になっていたんです。
ということで、ParallelsでWindows環境を構築し、teratailで知恵を借りて対策を考えてみたところ、CSSだけである程度対策できることがわかったので、今回はその方法をご紹介します。
インターネットエクスプローラー（IE）
Windowsの標準ブラウザであるインターネットエクスプローラーでは、以下のCSSでスクロールバーが非表示になります。
-ms-overflow-style: none;こちらをoverflowプロパティを適用している要素に追加すればOKです。
Google Chrome
インターネットエクスプローラーに次いで利用者数が多いであろうGoogle Chromeでは、::-webkit-scrollbar;という疑似要素を使います。
この疑似要素がある要素にdisplay:none;を適用することで、スクロールバーが非表示になります。
サンプルコード
以下がサンプルコードです。
HTML
<div class="wrapper">
<div class="scroll">
<ul>
<li>リスト１</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
</div>CSS
.scroll {
overflow-x: scroll;
}
.scroll::-webkit-scrollbar {
display: none;
}Firefox
これまでのブラウザの対策は非常に簡単でしたが、Firefox対策は少し勝手が違います。
というのも、Firefoxではoverflow: -moz-scrollbars-none;のCSSを足すだけでスクロールバーが非表示になるのですが、副作用としてマウスパッドなどでスクロールができなくなります。
（かなり謎仕様ですよね…笑）
そのため、スクロールする必要がない要素なのにスクロールバーが表示されている場合は無視していいですが（モバイルファーストでCSS設計している場合など）、それ以外ではスクロール機能を付ける必要があります。
ただ、マウス操作がメインのPC画面では、いずれにせよ何かしらのスクロール機能が必要になるはずなので、この機会に一緒に対策してみても良いかもしれません。
例えば、僕は自作テーマに「スクロール可能な方向にボタンを表示し、それ以外ではボタンを非表示にする」という機能を実装しています。
ボタンをクリックする度に少しスクロールするカスタマイズ！ 
もっと見る
スクロール機能を実装するjQueryプラグインもある
ちなみに、jQueryでスクロール機能を実装する方法もあります。
…が、僕は先述の方法でスクロール機能を補完していますし、そのためにプラグインを用意するのもどうかと思ったので使っていません。
参考How to hide scrollbar in Firefox?
まとめ
今回ご紹介したCSSをすべてまとめると以下のようになります。
.scroll {
-ms-overflow-style: none; /* IE対策 */
overflow: -moz-scrollbars-none; /* Firefox対策 */
}
.scroll::-webkit-scrollbar { /* Google Chrome対策 */
display: none;
}（※要素名などは適宜変更してください）
Macユーザーだから気づかなかったというのもありますが、まさかWindowsにこういった仕様があるとは想定していなかったため勉強になりました。
overflowの他にも表示に大きな差があるプロパティがあるかもしれませんので、ブラウザ別の対策の他にOS別・デバイス別の対策も考える必要があるかもしれませんね。
