CSS3

：

プロパティ

：

scroll-snap-type

　 編集：2022.07.05 by T.A.

→●、mdn

スクロール留めの規則。

名前 scroll-snap-type
値 none |
[x | y | block | inline | both] [mandatory | proximity]?
初期値 none
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 指定されたキーワード（たち）
正準的順序 文法に従う
アニメーション型 離散的

scroll-snap-type プロパティは、スクロール コンテナはスクロール留めコンテナになるかどうか、および［そうであれば、どの軸が考慮され、どの程度厳密に留められるべきか］を指定する。厳密度値は、指定されていない場合は proximity と見なされる。

¶例省く

ユーザー エージェントは、根要素に設定された scroll-snap-type 値を文書表示域に適用するものとする。（overflow プロパティと違って、scroll-snap-type 値は、HTML BODY要素からは伝播しないことに注意。）

none
この値が指定されているスクロール コンテナは、留められないものとする。
<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:none;
">
 <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>

[x | y | block | inline | both]
[mandatory | proximity]?
x、y
スクロール コンテナは、その［横軸、縦軸]方向に限り、留め位置に留める。
<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x;
">
 <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>

block、inline
スクロール コンテナは、その［ブロック軸、行内軸］方向に限り、留め位置に留める。
<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:inline;
">
 <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>

both
スクロール コンテナは、その両軸方向において、軸ごとに独立に留め位置に留める。（したがって、軸ごとに異なる要素に留められ得る。）
<DIV style="border:1px solid red; width:100px; height:100px;
 font-size:30px;
 box-sizing:content-box;
 overflow:auto;
 display:grid;
 grid-template:'a a a' 70px
	'a a a' 70px
	'a a a' 70px/70px 70px 70px;
 scroll-snap-type:both;
">
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">１</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">２</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">３</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">４</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">5</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">6</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">7</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
 ">8</DIV>
</DIV>

mandatory
【“義務的”】

この値が指定されているスクロール コンテナは、［スクロール操作が作動中でない間、および作動中のスクロールが終了したとき］は、妥当な留め位置が存在するならば、留められるものとする（留め位置が存在しなければ、留めも生じない）。 

<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x mandatory;
">
 <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>

proximity
【“近接的”】

この値が指定されているスクロール コンテナに対しては、ユーザー エージェントは ― 所与のスクロール パラメーターに基づいて、自身の裁量で ― スクロールの終了時に留め位置に留めてよい。

<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x proximity;
">
 <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>

作者は、留め位置に mandatory を利用するときは、多様な［スクリーン サイズや、場合によっては内容サイズ］を考慮するべきである。留められている、かつスクロール域より大きい要素へのアクセスは、ユーザー エージェントにより取り扱われるが、特に、同じスクロール域内に 留め位置を供する内容、供さない内容が混在する場合、後者の内容は、スクリーンに比して長いときにアクセス不能になり得る。

所与のボックスのスクロール留めコンテナは、次で与えられる：

該当するものがない場合、ボックスにはスクロール留めコンテナはない。その場合、ボックスの留め位置は留めを誘発しないことになる。

¶省く

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：