見出し画像

【備忘録 / Sass】スクロールバーを一括で非表示にするmixin

元々スクロールバーを非表示にするCSSがブラウザ毎に対応が異なるため、Scssのmixinを使って一括対応したいと思い作成。

@mixin hide-scrollbar {
    // Edge
    overflow: scroll;
    -ms-overflow-style: none;

    // Firefox
    scrollbar-width: none;

    // Chrome, Safari
    &::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
    }
}

スマートフォン用のメニューを作る際にスクロールバーを非表示にすることが多いので、その際に使用する感じ。


この記事が気に入ったらサポートをしてみませんか?