CSS - scroll-snap-stop

概要

属性名	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枚スクロールされて、途中のコンテンツが読み飛ばされることが無くなります。

normal: 制御を行いません。コンテンツはスクロールで読み飛ばされることがあります。デフォルト値です。
always: 指定したコンテンツで必ずスクロールを停止させます。

使用例

CSS

.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;
}

HTML

<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 を指定すると必ずそのコンテンツでスクロールがストップし、読み飛ばされることがなくなります。

CSS - scroll-snap-stop

概要

説明

使用例

リンク