各ブラウザでスクロールできるままでスクロールバー(ScrollBar)をCSSで隠す方法

スクロールバーがWindowsだとダサすぎる。本当にダサい。Google Chromeは独自のまぁまぁかっこいいスクロールバーだったりするけど、Internet ExpolorerとFirefoxのは本当にダサい。

スクロールはできる状態を維持しつつ、こんなダサいスクロールバーを隠したい。Macの場合はスクロールするときだけ出るかっこいいスクロールバー.これなら出しててもいい…

とまぁ、些細なことはここまでで、
今回はそのCSSでの実現方法をまとめておく.

ブラウザごとに対策を書いています。

以下を参考にしています。

https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/

Google Chromeの場合

*::-webkit-scrollbar { width: 0 !important }

上記でwebkitのスクロールバーは消える.overflowの設定をベットすればそれによってスクロールできるかどうかは変わってくる.

Internet Explorerの場合

* { -ms-overflow-style: none; }

InternetExplorer は上記でスクロールバーを隠すことができる.

FireFoxの場合

この場合CSSではできなくなったそうです。以下のものを使うとスクロールができなくなります。

× * { overflow: -moz-scrollbars-none; }

そのため、他の方法で対応する必要があり、この対応をすると他のブラウザ対応も必要なくなります。基本的な作戦は、スクロールバーを無理やり領域からはみ出させて画面にうつらないようにしています。

https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

上記の対策をここでは引用させていただきます。

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

parent側ははみ出たものをoverflowのhiddenで隠しています。