scroll-snap-type:y mandatory;(縦方向)を適用した例
以下の例では、親要素にscroll-snap-type:y mandatory;を設定し、
3つ目と6つ目の子要素にscroll-snap-align:end;を設定し、それ以外の子要素にscroll-snap-align:start;を設定しています。
親要素のスクロールバーをドラッグしてスクロールし、マウスを離すと、3つ目と6つ目の子要素の下端、又はそれ以外の子要素の上端にスクロールバーのスクロール位置がスナップします。
1つ目
scroll-snap-align:start;
上端スナップ
scroll-snap-align:start;
上端スナップ
2つ目
scroll-snap-align:start;
上端スナップ
scroll-snap-align:start;
上端スナップ
3つ目
scroll-snap-align:end;
下端スナップ
scroll-snap-align:end;
下端スナップ
4つ目
scroll-snap-align:start;
上端スナップ
scroll-snap-align:start;
上端スナップ
5つ目
scroll-snap-align:start;
上端スナップ
scroll-snap-align:start;
上端スナップ
6つ目
scroll-snap-align:end;
下端スナップ
scroll-snap-align:end;
下端スナップ
<div class="scroll-snap-v"> <div>1つ目<br>scroll-snap-align:start;<br>上端スナップ</div> <div>2つ目<br>scroll-snap-align:start;<br>上端スナップ</div> <div>3つ目<br>scroll-snap-align:end;<br>下端スナップ</div> <div>4つ目<br>scroll-snap-align:start;<br>上端スナップ</div> <div>5つ目<br>scroll-snap-align:start;<br>上端スナップ</div> <div>6つ目<br>scroll-snap-align:end;<br>下端スナップ</div> </div> <style> .scroll-snap-v{ scroll-snap-type:y mandatory; width:100%; height:50vh; overflow:auto; } .scroll-snap-v > div{ box-sizing:border-box; margin:0; padding:10px; width:100%; height:60%; } /* 1つ目、4つ目のdiv */ .scroll-snap-v > div:nth-of-type(3n+1){ scroll-snap-align:start; background:#ccccff; } /* 2つ目、5つ目のdiv */ .scroll-snap-v > div:nth-of-type(3n+2){ scroll-snap-align:start; background:#ccffcc; } /* 3つ目、6つ目のdiv */ .scroll-snap-v > div:nth-of-type(3n){ scroll-snap-align:end; background:#ffcccc; } </style>
scroll-snap-type:x mandatory;(横方向)を適用した例
以下の例では、親要素にscroll-snap-type:x mandatory;を設定し、
3つ目と6つ目の子要素にscroll-snap-align:end;を設定し、それ以外の子要素にscroll-snap-align:start;を設定しています。
親要素のスクロールバーをドラッグしてスクロールし、マウスを離すと、3つ目と6つ目の子要素の右端、又はそれ以外の子要素の左端にスクロールバーのスクロール位置がスナップします。
1つ目
scroll-snap-align:start;
左端スナップ
scroll-snap-align:start;
左端スナップ
2つ目
scroll-snap-align:start;
左端スナップ
scroll-snap-align:start;
左端スナップ
3つ目
scroll-snap-align:end;
右端スナップ
scroll-snap-align:end;
右端スナップ
4つ目
scroll-snap-align:start;
左端スナップ
scroll-snap-align:start;
左端スナップ
5つ目
scroll-snap-align:start;
左端スナップ
scroll-snap-align:start;
左端スナップ
6つ目
scroll-snap-align:end;
右端スナップ
scroll-snap-align:end;
右端スナップ
<div class="scroll-snap-h"> <div>1つ目<br>scroll-snap-align:start;<br>左端スナップ</div> <div>2つ目<br>scroll-snap-align:start;<br>左端スナップ</div> <div>3つ目<br>scroll-snap-align:end;<br>右端スナップ</div> <div>4つ目<br>scroll-snap-align:start;<br>左端スナップ</div> <div>5つ目<br>scroll-snap-align:start;<br>左端スナップ</div> <div>6つ目<br>scroll-snap-align:end;<br>右端スナップ</div> </div> <style> .scroll-snap-h{ scroll-snap-type:x mandatory; width:100%; height:50vh; overflow:scroll; white-space:nowrap; padding:0; font-size:0; } .scroll-snap-h > div{ box-sizing:border-box; margin:0; padding:10px; border:1px solid #000; width:80%; height:100%; display:inline-block; font-size:12pt; } /* 1つ目、4つ目のdiv */ .scroll-snap-h > div:nth-of-type(3n+1){ scroll-snap-align:start; background:#ccffff; } /* 2つ目、5つ目のdiv */ .scroll-snap-h > div:nth-of-type(3n+2){ scroll-snap-align:start; background:#ffffcc; } /* 3つ目、6つ目のdiv */ .scroll-snap-h > div:nth-of-type(3n){ scroll-snap-align:end; background:#ffccff; } </style>