スマホ用のスワイプギミックを作りたいときとか。
どういうことか
スライドのjsとかを使わずに横スクロールで閲覧するコンテンツを作りたい。
領域内でスクロールさせるんだけど、両端に余白を入れたい。
スクロール領域自体はブラウザの幅いっぱいに取ってある。領域の外側に余白を作ると画面端から出てる感じがしないからで、だから見た目をいい感じにしたいというのがゴール。
要するに領域の内部に余白を作りたい。
で、上下左はいけるんだけど右端に余白がつかない。marginもpaddingも削られてしまう。
そういう場合のやつをやっていく。
参考
参考にはしたけど環境に合わなかったので導入しなかった。
🐛CSSでoverflowプロパティ使用時に右と下のpaddingやmarginが効かないバグ｜たかもそ／Web Creator.
overflowプロパティにautoやscrollを指定してスクロール可能な領域を作った際、paddingプロパティを指定するとpadding-rightとpadding-bottomだけ描画されないバグがあります。 padding-rig...
note.com
こうする
ちょうど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は楽だけどたまにデザインに干渉する事があるので扱いには気をつけること。
コメント