WEBTODESIGN

【CSS】Firefoxでスクロールバーを非表示にする

スクロールバーの非表示は、UXの観点で慎重に検討する必要がありますが、スライドなどでスクロールバーを表示したくないことがあります。

HTMLが以下のようになっている場合

Chromeの場合

Chromeの場合は、疑似要素で非表示にできます。

div::-webkit-scrollbar{
    display: none;
}

こうすると、div要素のスクロールバーが消えます。

Firefoxの場合

Firefoxはこれでは消えません…。疑似要素は使用せず、要素自体にscrollbar-widthプロパティを適用します。

div{
    scrollbar-width: none;
}

scssでまとめると

scssだと以下のようにするとばっちりです！

div{
    scrollbar-width: none;//firefox
    &::-webkit-scrollbar{
        display: none;
    }
}

RECOMMENDATION

NEWEST