scroll-margin-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2021年4月⁩.

scroll-margin-bottom プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して(スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

試してみましょう

scroll-margin-bottom: 0;

scroll-margin-bottom: 20px;

scroll-margin-bottom: 2em;

<section class="default-example" id="default-example">
 <div class="scroller">
 <div>1</div>
 <div id="example-element">2</div>
 <div>3</div>
 </div>
 <div class="info">スクロール »</div>
</section>

.default-example .info {
 inline-size: 100%;
 padding: 0.5em 0;
 font-size: 90%;
 writing-mode: vertical-rl;
}
.scroller {
 text-align: left;
 height: 250px;
 width: 270px;
 overflow-y: scroll;
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 border: 1px solid black;
 scroll-snap-type: y mandatory;
}
.scroller > div {
 flex: 0 0 250px;
 background-color: rebeccapurple;
 color: #fff;
 font-size: 30px;
 display: flex;
 align-items: center;
 justify-content: center;
 scroll-snap-align: end;
}
.scroller > div:nth-child(even) {
 background-color: #fff;
 color: rebeccapurple;
}

構文

css

/* <length> 値 */
scroll-margin-bottom: 10px;
scroll-margin-bottom: 1em;
/* グローバル値 */
scroll-margin-bottom: inherit;
scroll-margin-bottom: initial;
scroll-margin-bottom: revert;
scroll-margin-bottom: revert-layer;
scroll-margin-bottom: unset;