Zenn
📱

CSSで横スクロールを実装する

に公開4件
CSS
横スクロール
tech

ちょっとMySiteのメニューで使いたかったので,調べてみました.

ul要素に以下のプロパティを当てるだけでできました.

ul {
  overflow-x: auto;
  white-space: nowrap;
}

overflow-x:
要素が収まらない場合はみ出た左右をどうするか決める

white-space: nowrap;
改行しないようにします.

【参考文献・参考記事など】
横（水平）スクロールをCSSで簡単に実装する方法

Discussion

catnosecatnose

モバイル端末でスムーズにスクロールできるようにするためには

ul {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

のように -webkit-overflow-scrolling: touch;も合わせて指定するのがおすすめです。

Knob/のまど先生Knob/のまど先生

ご指摘ありがとうございます！
最新のiOSでは問題なく動作したのですが、これは、その他のiOSやAndroidなどにも対応するためでしょうか？

catnosecatnose

あ、なくても動作しますので誤りというわけでは全くないです！
-webkit-overflow-scrolling: touchも合わせて指定するとスクロールがなめらかになってより快適になるというイメージです。
※ iOSとAndroidの両方に作用します。