サイトのデザインによってはスクロールバーを消したいときありませんか？
今回はスクロールバーを非表示する方法と、うっかりな私がハマったミスをご紹介します。

スクロールバーを非表示にする方法はいたって簡単です。
非表示にしたい要素に対して下記のソースを追加するだけです。

body {
	-ms-overflow-style: none;    /* IE, Edge 対応 */
	scrollbar-width: none;     /* Firefox 対応 */
}

body::-webkit-scrollbar {
    display:none; //chrome対応
}

が、ここでハマった落とし穴。
FireFoxブラウザで見るとなんとスクロールバーがでているではないか！！！
なんでだ！わざわざそれぞれのブラウザに対応できるように3行も書いているのに！

調べてもでてこない、原因がわからない…

というころで、検索魔になていると
『Firefoxは親要素にかけないとスクロールバーが消えてくれない！』という話がちらほら。

そこで、HTMLにCSSで以下のように追記ました。

html {
    scrollbar-width: none;
}

消えてくれたーーーーー！
めちゃうっかりさんでした。

• code,
• css3,
• web