CSS3：scroll-snap-alignプロパティ

scroll-snap-align プロパティは、要素が生成するボックスボックスの留め位置を、各軸ごとに、［コンテナの中における対象の整列法］として指定する ― ここで：

名前	`scroll-snap-align`
値	[none \| start \| end \| center]{1,2}
初期値	none
適用対象	すべての要素
継承	されない
百分率	受容しない
算出値	2 個のキーワード
正準的順序	文法に従う
アニメーション型	離散的

2 個の値は、順に、留めにおける［ブロック軸、行内軸］方向の整列を指定する ― これらの軸は、留めコンテナの書字モードにより決定される。値が 1 個だけ指定された場合、その値が 2 個目の値も与える。

ボックスの留め位置は、値に応じて、［対応する軸において、対象、コンテナを次のように整列させる位置］として定義される：

none

留め位置は定義されず、対象、コンテナは互いに整列されない。

start

対象、コンテナの始端どうしを整列させる。

<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-padding:10px;
">
 <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;
 ">１</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;
 ">２</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;
 ">３</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;
 ">４</DIV>
</DIV>

end

対象、コンテナの終端どうしを整列させる。

<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-padding:10px;
">
 <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:end;
 ">１</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:end;
 ">２</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:end;
 ">３</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:end;
 ">４</DIV>
</DIV>

center

対象、コンテナの中央どうしを整列させる。

<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-padding:10px;/*この値は意味なし*/
">
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 80px; width:80px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">１</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 80px; width:80px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">２</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 80px; width:80px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">３</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 80px; width:80px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">４</DIV>
</DIV>

［始端／終端］どうしの整列は、留めコンテナの書字モードに基づいて解決される ― ただし、スクロール留め区画が留め域より大きい事例では、ボックス自身の書字モードに基づいて解決される（これは、［start は常に、その内容を始めから読めるように対象を整列する］ことを確保しつつ、［コンテナ内の各対象の留め整列が一般に一貫する］ことを許容する。）

スクリプト：

スクリプト：

CSS3

プロパティ

scroll-snap-align

テスト