CSS - ボックスを横に並べてスムーズにスクロールさせる方法

2019-03-17 12:32:39 2237

はじめに

今回は、divなりなんなりのボックスを、横にズラーーーーーっと並べて、はみ出し部分をスクロールさせる方法を紹介する。

結論

sample.html

<div class="box1">
<div class="inner_box">1</div>
<div class="inner_box">2</div>
<div class="inner_box">3</div>

<div class="inner_box">99</div>
<div class="inner_box">100</div>
</div>

scroll.css

.box1 {
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}

.box1 .inner_box {
display: inline-block;
vertical-align: top;
}

解説


.box1

displayをflexに、overflow-xをscrollにすることで、延々とはみ出しで横スクロールをしてくれるようになる。
-webkit-overflow-scrollingは、スクロールをぬるぬる慣性スクロールにしてくれるおまじない。

.inner_box

まずはdisplayをinline-blockとすることで、ボックスを横並びにする。普通ならば、横幅いっぱいまで並び終えると改行されるが、親要素のoverflow-xが効いているので、改行せずに延々と横並びになる。
次に、おまけでボックスのトップが揃うように、vertical-alignを設定している。これでバラバラに並ぶことがなくなる。
底を揃えたければ、botttomにするだけ。centerもあります。

参考にしたサイト



@Ilias_studio
2019-03-16 16:05:32
スクロールして画像とかが見える範囲になったらヒューンって横から登場して来たりするのって、CSSとHTMLだけじゃできないのかな・・・

@unimemo_blog
2019-03-14 23:05:03
📣過去のおすすめエントリー
今回は「スマートフォンでテーブルを横スクロールさせる方法」をご紹介します。

スマートフォンでテーブルを横スクロールさせる方法【CSS2行!】|ゆにメモ https://t.co/T3U6c5tiua https://t.co/zN214shWc0

@YasTac
2019-03-13 23:30:51
CSSだけで実装できる横スクロールUI(スクロールバーなし) https://t.co/66mWTSm1H3

@tora_kappa
2019-03-11 14:01:54
cssで横に無限ループしてスクロールするものを作りたいのですが、上手くいかなくて悩んでいます。

いくつかサイトみると、スクロールさせたい要素群を2つ作る。cssの「animation」でスクロールさせる領域に差異をつけることで、… https://t.co/TUbOSZv80F

関連記事