[jQuery]中身が動的なコンテンツを横スクロールにする一つの方法

幅の指定をjsで後付するだけなんだけどね。

基礎
jQueryで要素の幅を指定する
ぶっちゃけた話
別アプローチ

基礎

こんな感じでhtmlがあるとする。

<div class="wrap">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

cssでこうすれば、ブラウザ幅が要素以下になった時に横スクロールになる。

.wrap{
    overflow-x: auto;
}
.wrap ul{
    width: 100%;
    min-width: 1500px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
}
.wrap ul li{
    flex: 1;
    min-width: 300px;
}

liの幅を300pxにしたい、liは5個ある、だからulの幅が1500pxになる。

じゃあliが4個だったり6個だったりにしたいときはどうすんの、という話。
cssをいちいち変更してたらめんどくさいよね、っていう話。

jQueryで要素の幅を指定する

jsでliの数を拾ってきて、1つあたりの幅を掛けて、ulに適用させたらいい。

$(function(){
    listNum = $('.wrap ul li').length;
    listWidth = listNum * 300;
    $('.wrap ul').css('min-width',listWidth+'px');
})

競合したらまずいんでcssのmin-widthは消しておく。

.wrap ul{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
}

これでOK。

なんでmin-widthかっていうと、widthでもいいんだけど、ブラウザ幅が1500px超えた幅で幅いっぱいに等間隔にliを配置できるからっていう、それだけ。

ぶっちゃけた話

少なすぎたり多すぎると何がなんだかわからなくなるので、やっぱり数は制限したほうがいい。
wpの記事一覧とかmakeshopのクリエイターモードとか、書き出しにあたって表示数を指定できるし。青天井の一覧を仕込むことは稀だと思う。

別アプローチ

<ul>をposition:absolute;にして組めばそもそも幅を気にすることはないんだよね。js使わなくてもいいんだよね。

親に「white-space: nowrap;」を入れたら親要素を無視して子要素が並ぶから、それを活用する。

.parent{
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}
.parent .child{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

こんなかんじで。