scroll-snap-stop
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2022.
scroll-snap-stop
は CSS のプロパティで、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。
試してみましょう
scroll-snap-stop: normal;
scroll-snap-stop: always;
<section class="default-example" id="default-example">
<p class="explanation">
このプロパティの効果は、タッチパッドを備えた端末で確認できます。 1 回のスワイプですべてのアイテムをスクロールしてみてください。 <b class="keyword">'normal'</b> の値はすべてのページを通過しますが、 <b class="keyword">'always'</b> は 2 つ目のページで停止します。
</p>
<div class="snap-container">
<div>1</div>
<div id="example-element">2</div>
<div>3</div>
</div>
<div class="info">スクロール »</div>
</section>
.default-example {
flex-direction: column;
}
.explanation {
margin-top: 0;
}
.keyword {
color: darkorange;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
.snap-container {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
.snap-container > div {
flex: 0 0 250px;
width: 250px;
background-color: rebeccapurple;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.snap-container > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
構文
/* キーワード値 */
scroll-snap-stop: normal;
scroll-snap-stop: always;
/* グローバル値 */
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;
値
公式定義
初期値 | normal |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
scroll-snap-stop =
normal |
always
例
異なるスナップ停止の値を設定
以下の例は、scroll-snap-stop
の always
値と normal
値の違いを示しています。 2 つの scroll-snap-stop
値の違いは、scroll-snap-type
プロパティが mandatory
に設定されている場合(この例で使用されている)でより顕著になります。
HTML
<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS
/* 親に強制スクロールスナップを設定 */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
/* 子要素のスクロールスナップ配置を定義 */
div > div {
scroll-snap-align: center;
}
/* 子要素のスクロールスナップ停止を定義 */
.always-stop > div {
scroll-snap-stop: always;
}
.always-stop-odd > div:nth-of-type(odd) {
scroll-snap-stop: always;
}
.always-stop-even > div:nth-of-type(even) {
scroll-snap-stop: always;
}
.normal-stop > div {
scroll-snap-stop: normal;
}
結果
下記の X および Y ボックスで、それぞれ左から右、上から下へスクロールしてみてください。 scroll-snap-stop
プロパティが always
に設定されている X および Y ボックスでは、高速でスクロールしても、スナップ点でスクロールが強制的に停止します。ただし、 scroll-snap-stop
プロパティが normal
に設定されているボックスでは、高速でスクロールしてもスナップ点はスキップされます。
必要に応じて、スクロールコンテナー内で always
で停止するアイテムを選択することができます。これは、以下の例で、奇数と偶数のアイテムを対象として示されています。要件に応じて、別の戦略を選択することができます。以下の例では、スクロールは、 2 つ目と 3 つ目のボックスの奇数と偶数のアイテムを「通過」しません。
仕様書
Specification |
---|
CSS Scroll Snap Module Level 1 # scroll-snap-stop |