📱

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

1 min read 4
CSS
#
横スクロール
tech

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

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

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