📱

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

1 min read 4

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

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

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

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

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

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

Discussion

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

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

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

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

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

なめらかになるのですね!それは重要です!ありがとうございます🙇‍♂️

ログインするとコメントできます