スクロールスナップ
スクロールスナップ
スクロール可能なコンテナをピッタリスナップ
area1 scroll 1/4 ↓
area2 scroll 2/4 ↓
縦スクロール css ex.
.oya{
height: 50dvh;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
& .ko {
scroll-snap-align: start;
}
}
height: 50dvh;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
& .ko {
scroll-snap-align: start;
}
}
area3 scroll 3/4 ↓→
縦横スクロール css ex.
.oya{
height: 50dvh;
overflow: auto;
scroll-snap-type: both;
display: grid;
grid-template-columns: repeat(5, 70vw);
grid-template-rows: repeat(3, 50dvh);
-webkit-overflow-scrolling: touch;
& .ko {
scroll-snap-align: start;
&:nth-child(even) {
background-color: rgb(212, 216, 215);
} &:nth-child(odd) {
background-color: rgb(165, 179, 182);
}
} }
height: 50dvh;
overflow: auto;
scroll-snap-type: both;
display: grid;
grid-template-columns: repeat(5, 70vw);
grid-template-rows: repeat(3, 50dvh);
-webkit-overflow-scrolling: touch;
& .ko {
scroll-snap-align: start;
&:nth-child(even) {
background-color: rgb(212, 216, 215);
} &:nth-child(odd) {
background-color: rgb(165, 179, 182);
}
} }
area3-2 1/2 ←↓→
area3-3 1/3 ←↓→
area3-4 1/4 ←↓→
area3-5 1/5 ←↓
area3-6 2/1 ↑↓→
area3-7 2/2 ←↑↓→
area3-8 2/3 ←↑↓→
area3-9 2/4 ←↑↓→
area3-10 2/5 ←↑↓
area3-11 3/1 ↑→
area3-12 3/2 ←↑→
area3-13 3/3 ←↑→
area3-14 3/4 ←↑→
area3-15 3/5 ←↑
area4 scroll 4/4
Photos →
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
Photos
.oya{
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x;
scroll-padding: 1rem;
-webkit-overflow-scrolling: touch;
& .ko {
scroll-snap-align: start;
}
}
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x;
scroll-padding: 1rem;
-webkit-overflow-scrolling: touch;
& .ko {
scroll-snap-align: start;
}
}
-webkit-overflow-scrolling: touch;
/* Important for iOS devices */
プロパティ : scroll-snap-type
スナップ領域に合わせスクロールの位置を調整
記述例
scroll-snap-type : inline mandatory;
- スナップ軸キーワード
x or inline（←→）
y or block（↓↑）
both（←↑↓→）
none スナップしない- オプションのキーワード
mandatory | スクロールポイントにスナップする。
proximity | デフォルト値。定義されたポイントにスナップする可能性あり。
プロパティ : scroll-snap-align
スナップ領域のどの部分に調整するかを指定
記述例
scroll-snap-align : start end ;
start（block（↓↑））、 end（inline（→←））
- start
領域の先頭位置がスナップ位置- center
領域の中央位置がスナップ位置- end
領域の後尾位置がスナップ位置
プロパティ : scroll-snap-stop
スナップ位置を通過可能にするかを指定
記述例
scroll-snap-stop : always;
- normal
通過可能 1,2,3,4がある場合は1→4までスクロールできる- always
子要素にscroll-snap-stop: always;をつけた地点に強制停止
1,2,3,4がある場合で2にalwaysがあれば2でスクロール停止
プロパティ : scroll-margin、scroll-padding
記述例
scroll-padding-inline-start : 1rem;
子要素は左端から1remの地点にスナップ
- scroll-margin
子要素に指定- scroll-padding
親要素に指定scroll-paddingはヘッダーの高さ調整で使うことが多い。
