📱
CSSで横スクロールを実装する
ちょっとMySiteのメニューで使いたかったので,調べてみました.
ul要素に以下のプロパティを当てるだけでできました.
ul {
overflow-x: auto;
white-space: nowrap;
}
overflow-x:
要素が収まらない場合はみ出た左右をどうするか決める
white-space: nowrap;
改行しないようにします.
【参考文献・参考記事など】
横(水平)スクロールをCSSで簡単に実装する方法
ちょっとMySiteのメニューで使いたかったので,調べてみました.
ul要素に以下のプロパティを当てるだけでできました.
ul {
overflow-x: auto;
white-space: nowrap;
}
overflow-x:
要素が収まらない場合はみ出た左右をどうするか決める
white-space: nowrap;
改行しないようにします.
【参考文献・参考記事など】
横(水平)スクロールをCSSで簡単に実装する方法
Discussion
モバイル端末でスムーズにスクロールできるようにするためには
のように
-webkit-overflow-scrolling: touch;
も合わせて指定するのがおすすめです。ご指摘ありがとうございます!
最新のiOSでは問題なく動作したのですが、これは、その他のiOSやAndroidなどにも対応するためでしょうか?
あ、なくても動作しますので誤りというわけでは全くないです!
-webkit-overflow-scrolling: touch
も合わせて指定するとスクロールがなめらかになってより快適になるというイメージです。※ iOSとAndroidの両方に作用します。
なめらかになるのですね!それは重要です!ありがとうございます🙇♂️