CSSのscroll-snap完全ガイド｜スクロール位置の指定・snap-typeとalignの使い方

scroll-snap-type、scroll-snap-alignの概要

CSSの`scroll-snap`プロパティを使えば、スクロール操作時に要素の位置をピタッと揃えることができます。
このページでは、`scroll-snap-type`や`scroll-snap-align`の使い方を、縦方向・横方向それぞれのサンプルコードとともに解説します。
また、`start`・`end`の違いや、複数要素のスナップ挙動など、実装時に役立つポイントも紹介しています。

scroll-snap-type:y mandatory;(縦方向)を適用した例

以下の例では、親要素にscroll-snap-type:y mandatory;を設定し、 3つ目と6つ目の子要素にscroll-snap-align:end;を設定し、それ以外の子要素にscroll-snap-align:start;を設定しています。
親要素のスクロールバーをドラッグしてスクロールし、マウスを離すと、3つ目と6つ目の子要素の下端、又はそれ以外の子要素の上端にスクロールバーのスクロール位置がスナップします。

<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つ目の子要素の右端、又はそれ以外の子要素の左端にスクロールバーのスクロール位置がスナップします。

<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>