Firefoxでscrollbar-width: none;が効かない!なんで!?

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

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

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;
}

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