[css]overflow-yの中身の右端に余白が作れないときの対処法

スマホ用のスワイプギミックを作りたいときとか。

どういうことか
参考
こうする
注意点的な話
駄目な場合の見直しポイント

どういうことか

スライドのjsとかを使わずに横スクロールで閲覧するコンテンツを作りたい。

領域内でスクロールさせるんだけど、両端に余白を入れたい。

スクロール領域自体はブラウザの幅いっぱいに取ってある。領域の外側に余白を作ると画面端から出てる感じがしないからで、だから見た目をいい感じにしたいというのがゴール。

要するに領域の内部に余白を作りたい。

で、上下左はいけるんだけど右端に余白がつかない。marginもpaddingも削られてしまう。

そういう場合のやつをやっていく。

参考

参考にはしたけど環境に合わなかったので導入しなかった。

note ――つくる、つながる、とどける。

こうする

ちょうどwp触ってたから何なんだけど、例えばパンくずリスト。

<div id="breadlist">
    <div class="aioseo-breadcrumbs"><span class="aioseo-breadcrumb">
        <a href="***" title="ホーム">ホーム</a>
    </span><span class="aioseo-breadcrumb-separator">›</span><span class="aioseo-breadcrumb">
        <a href="***" title="***">***</a>
    </span><span class="aioseo-breadcrumb-separator">›</span><span class="aioseo-breadcrumb">
        <a href="***" title="***">***</a>
    </span><span class="aioseo-breadcrumb-separator">›</span><span class="aioseo-breadcrumb">
        ***
    </span></div>
</div>

#breadlist .aioseo-breadcrumbs{
    padding: 20px;
    white-space: nowrap;
    overflow-y: auto;
}

「overflow-y」を仕込んだ要素自体にpaddingをやっちゃえばいいんですよね。

こういうのもいける。

<ul>
    <li>****</li>
    <li>****</li>
    <li>****</li>
    <li>****</li>
    <li>****</li>
</ul>

ul{
    margin: 0;
    padding: 20px;
    list-style-type: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    overflow-y: auto;
}
li{
    width: 320px;
}

どうでしょうか。

注意点的な話

削れるタイプの作り方。

<div class="wrap">
    <div class="set">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        ︙
    </div>
</div>

要点だけ書くけど、例えばこれ。

.wrap{
    overflow-y: auto;
}
.set{
    padding: 20px;
}

またはこう。

.wrap{
    overflow-y: auto;
}
.inner{
    margin: 20px;
}

組み合わせの問題なんで、そこさえ気をつければ大丈夫。

バグっぽい話ではあるんだけど、対策したらDOM数やら階層を地味に抑えられるのでむしろ良かった気がしてる。

駄目な場合の見直しポイント

親要素（直前じゃなくて先祖のどれか）が原因でページ自体の幅が広がっちゃう場合がある。

例えば、gridで構成した中に入れたとか。

対策は親要素に実数を入れるとか、overflowを入れるとか。overflowは楽だけどたまにデザインに干渉する事があるので扱いには気をつけること。