📱

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

2020/10/23に公開4

ちょっと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の両方に作用します。