【簡単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プロパティが原因で横スクロールがうまくいかない場合があるので、全体的にコードを見直す必要がでてくるかもしれません。

以上で解説をおわります。

Ads

関連記事

WordPress プログラミング

【簡単】Advanced Custom Fieldsを使い、手動で任意の関連記事を出力するフィールドを導入

2022.03.21
83
JavaScript プログラミング

複数設置に対応したタブ切り替えをjqueryで実装しよう

2020.10.20
281
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
33
JavaScript プログラミング

bxsliderを使って左右チラ見せのカルーセルスライダーを実装する方法

2022.01.24
168