スクロールさせたい、しかしスクロールバーは出したくない。という場合はどうするか。

よくあるのだと、JS によって制御が入っていてある状況ではスクロールバーが出ているのだが、 途中でコンテンツ量が増減して、それによりスクロールバーが表示されたりされなかったりして、 それによりコンテンツ幅が増減して、それによりレイアウトが崩れるなんてことがおきる。

#hoge{
    height: 300px;
    overflow: auto;
    -ms-overflow-style: none;    /* IE, Edge */
    scrollbar-width: none;       /* Firefox */
    &::-webkit-scrollbar {       /* Chrome, Safari */
        display:none;
    }
}

Firefox だけは概念として最外要素のスクロールバーは body ではなく html にあるということのようで、body に指定しても効かない。なので html 要素に設定する。

html{
    scrollbar-width: none;       /* Firefox */
}
body{
    -ms-overflow-style: none;    /* IE, Edge */
    &::-webkit-scrollbar {       /* Chrome, Safari */
        display:none;
    }
}