| 属性名 | scroll-snap-stop |
|---|---|
| 値 | normal | always |
| 初期値 | normal |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_scroll-snap-stop |
スマホで写真リストなどのコンテンツをスクロールさせる際、scroll-snap-type と scroll-snap-align を用いると、常に写真などのコンテンツをコンテナの先頭や中央に調整することができます。加えて scroll-snap-stop を指定すると、写真などのコンテンツが確実に1枚1枚スクロールされて、途中のコンテンツが読み飛ばされることが無くなります。
.my-example {
display: flex;
gap: 20px;
margin: 0 auto 16px auto;
height: 100px;
width: 50%;
border: 1px solid #ccc;
overflow-x: scroll;
scroll-snap-type: x mandatory;
div {
background-color: #fcc;
min-width: 70%;
padding-top: 20px;
text-align: center;
scroll-snap-align: start;
}
}
.sss-always div {
scroll-snap-stop: always;
}
<div class="my-example"> <div>Slide#1</div> <div>Slide#2</div> <div>Slide#3</div> <div>Slide#4</div> <div>Slide#5</div> <div>Slide#6</div> <div>Slide#7</div> <div>Slide#8</div> <div>Slide#9</div> <div>Slide#10</div> <div>Slide#11</div> <div>Slide#12</div> </div> <div class="my-example sss-always"> <div>Slide#1</div> <div>Slide#2</div> <div>Slide#3</div> <div>Slide#4</div> <div>Slide#5</div> <div>Slide#6</div> <div>Slide#7</div> <div>Slide#8</div> <div>Slide#9</div> <div>Slide#10</div> <div>Slide#11</div> <div>Slide#12</div> </div>
PCだとわかりづらいので、スマホで横スクロールしてみてください。scroll-snap-type: x mandatory と scroll-snap-align: start を指定しているのでスライドなどのコンテンツは必ず開始位置にスナップされます。上段は強めにスクロールすると slide#1 から slide#7 や slide#8 などにスクロールしますが、下段のように snap-scroll-stop: always を指定すると必ずそのコンテンツでスクロールがストップし、読み飛ばされることがなくなります。