ひとりPython3アプリ制作、分析、解析

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

2019-03-17 12:32:39 6322

はじめに

今回は、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もあります。

参考にしたサイト

横並びにした時に、改行せずにスクロールさせる方法
QiitaCommunitySignupLogin{"@context":"http://schem


@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

関連記事

CSS - ページが読み込まれるたびにキャッシュを使用せずにスタイルシートを読み込ませる方法
CSS3 1945
HTML - DIV要素全体にリンクをかける方法
CSS3 10800
このサイトについて
Mac Python3 Flask jQuery CSS3 Excel VBA Brython 旅行記 その他 2382