【CSS】横スクロールバーを表示させない。

はじめに

パンくずやタグを2列に折り返さずに、横スクロールバーで対応したい時があったのでメモとして残します。

横スクロールにする方法

下記コードでスマホの行の折り返しをなくし、macbookでも問題なかったです。

.wrap{
            overflow-x: scroll;
            word-break: keep-all;
            white-space: nowrap;
}

ですが、imacでみた際にスクロールバーが表示されるので、そのスクロールバーは非表示にしていきたいと思います。

横スクロールバーの非表示方法

.wrap{
            overflow-x: scroll;
            word-break: keep-all;
            white-space: nowrap;
            scrollbar-width: none !important;  //追加
            -ms-overflow-style: none !important; //追加
}
.wrap::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none !important;
}

参考文献

https://qumeru.com/magazine/165https://qumeru.com/magazine/165