【CSS】横スクロールバーを表示させない。
- 公開日：
- 更新日：
- 文字数：619文字
はじめに
パンくずやタグを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;
}