CSS3

プロパティ

scroll-snap-stop

→●、mdn

スクロール留めの規則。

ある、意図された方向へスクロールするとき、自然な終止点に到達して最終的なスクロール位置を選定する前に、スクロール コンテナは、いくつかの可能な留め位置（同じ方向へスクロールする距離がより短い場合に、留めるに妥当な位置）を“通過”し得る。scroll-snap-stop プロパティは、そのような可能な留め位置がスクロール操作を“捉えて”、それが自然に終止する前にスクロール コンテナを止めるよう強制できるようにする。

normal

スクロール コンテナは、スクロール操作を実行する間、この要素により定義される留め位置を通過してもよい。

<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x mandatory;
 scroll-snap-stop:normal;
">
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
 ">１</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
 ">２</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
 ">３</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
 ">４</DIV>
</DIV>

¶scroll-snap-stopをアイテム側に設定するようだが、効果無い。

always

スクロール コンテナは、スクロール操作を実行する間、この要素により定義される留め位置を通過しないものとする ― そのような要素たちの留め位置のうち、最初に遭遇した所で留めるものとする。

<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x mandatory;
 scroll-snap-stop:always;
">
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
 ">１</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
 ">２</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
 ">３</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
 ">４</DIV>
</DIV>

このプロパティは、終止位置のみ意図されているスクロール操作には効果がない ― それは、概念的に留め位置を“通過しない”ので。

留めの仕組み

留める際に留め位置を選定するモデルを成す精確なアルゴリズムは、意図的に、ほぼ未定義にされている ― ユーザー エージェントは、［利用者の意向、利用者とのやりとり］が成すモデルを［利用者に最善に仕える］ように洗練して、［時間越しにどう応答するか］を調整できる。

この節では、［スクロール留めの機構について論じる］ため、および［効果的なスクロール留め策は どの様なものになるかについて、いくつかの指針を供する］ために有用になる概念を、いくつか定義する。ユーザー エージェントには、この指導に適応するように、［自身による最善な判定を適用しつつ、留めにおける自前のふるまいを定義する］ことが奨励される。それはまた、作者が［スクロール留めを念頭に、自身のユーザー インタフェースを設計する］ときに依存できるような、［最低限の適度なふるまいを確保するための、少数の要件］も供する。

テスト