【簡単CSS】横スクロールできない問題を解決する方法
スマホで、ある複数の要素を横スクロールで見せたい。
CSSで横スクロールを実装したが、途中で切れてしまう。
要素が段落ちしてしまい、横一列にならない。
本記事ではこのような悩みを解決します。
横スクロールさせるCSS
/* 横スクロールさせたい要素の親要素 */
.box {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
上記CSSを横スクロールさせたい要素の親要素に追加する事で実装できます。
横スクロールにならない場合、以下CSSの付け忘れが原因かもしれません。
途中で切れてしまう場合
.box {
overflow-x: auto;
}
要素が途中で切れて、横スクロール出来ない場合、親要素にoverflow-x: auto;を付け忘れてる可能性があります。
スクロール要素にoverflow-x: auto;を付けてませんか？
親要素に付けましょう。
overflowプロパティには他にもoverflow-yなど似たようなプロパティがあるので、横スクロールしたい場合はoverflow-x: auto;を使います。
横一列にならない場合
/* 横スクロールさせたい要素の親要素 */
.box {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
/*横スクロール要素*/
.item {
display: inline-block;
}
横一列にならない場合、横スクロールさせる要素がブロック要素を使ってる可能性があります。
スクロール要素にdisplay: inline-block;をあてる事でブロック要素をインラインブロックに変換できます。
また親要素にwhite-space: nowrap;を付け忘れていませんか？
上記プロパティを付与する事で自動的な折り返しを無効にしてくれるので段落ちしなくなります。
これで横一列に要素が並び、改善されます。
まとめ
他にも先祖要素のCSSプロパティが原因で横スクロールがうまくいかない場合があるので、全体的にコードを見直す必要がでてくるかもしれません。
以上で解説をおわります。
目次
