| 属性名 | scroll-snap-type |
|---|---|
| 値 | none | [ x | y | block | inline | both ] [ mandatory | proximity ]? |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | しない |
| サポート | https://caniuse.com/?search=scroll-snap-type |
スクロールする際にスクロール位置がスナップ領域に合わせて調整されます。使用例を参照してください。スクロールさせると、各セクションの先頭がスクロールの先頭になるように調整(スナップ)されます。
| 値 | 説明 |
|---|---|
| none | スナップしません。 |
| x | X軸方向のみスナップします。 |
| y | Y軸方向のみスナップします。 |
| block | ブロック方向(横書きの場合はY軸方向、縦書きの場合はX軸方向)のみスナップします。 |
| inline | インライン方向(横書きの場合はX軸方向、縦書きの場合はY軸方向)のみスナップします。 |
| both | X軸・Y軸両方向でスナップします。 |
| mandatory | 強制的にスナップします。 |
| proximity | スナップすることを指示しますが強制的ではありません。 |
.snap-container {
height: 10rem;
width: 20rem;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snap-content {
height: 15rem;
background-color: #ddd;
scroll-snap-align: start;
}
<div class="snap-container">
<section class="snap-content">
<h5>Section-1</h5>
</section>
<section class="snap-content">
<h5>Section-2</h5>
</section>
<section class="snap-content">
<h5>Section-3</h5>
</section>
</div>