CSS スクロールスナップ

CSS スクロールスナップ (CSS scroll snap) モジュールは、スナップ位置を定義することで、パンおよびスクロールの動作を制御するためのプロパティを提供します。ユーザーがスクロールコンテナー内のスクロール可能なコンテンツをスクロールすると、コンテンツは指定された位置にスナップされ、ページングおよびスクロール位置指定の機能を提供します。

このモジュールには、スクロールコンテナーの scroll-padding プロパティ群があり、ビューに入ってくるスクロール操作中に、ページ切り替え時の最適なビュー領域に調整することができます。また、スクロールコンテナの子要素に設定される scroll-margin および scroll-alignment プロパティもあり、子要素が画面にスクロールされたときの視覚的な領域を調整することができます。さらに、個々の子要素でスクロールを強制的に停止させるプロパティも含まれています。

スクロールスナップの動き

下のボックスでスクロールスナップを確認するには、スクロール可能なビューポート内の 45 個の番号付きボックスのグリッドを上下左右にスクロールしてください。下の例の "Play" をクリックすると、ソースを MDN Playground で見たり編集したりすることができます。

const positions = ["start", "center", "end"];const inlineDirection = document.getElementById("inline");const blockDirection = document.getElementById("block");const stop = document.getElementById("stop");const snap = document.getElementById("snap");const all = document.querySelector("article");const rules = document.getElementById("css-output").sheet.cssRules;setSST();setSSA();inlineDirection.addEventListener("change", () => {  setSSA();});blockDirection.addEventListener("change", () => {  setSSA();});stop.addEventListener("change", () => {  setSST();});snap.addEventListener("change", () => {  all.classList.toggle("snapDisabled");});function setSSA() {  rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${    positions[inlineDirection.value]  }`;}function setSST() {  if (stop.checked) {    rules[0].style.scrollSnapStop = "always";  } else {    rules[0].style.scrollSnapStop = "normal";  }}

<article>  <ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul>  <div>    <fieldset>      <legend>オプションを変更</legend>      <p>        <label          ><input            type="range"            min="0"            max="2"            value="1"            list="places"            />          ブロック位置</label        >      </p>      <p>        <label>          <input            type="range"            min="0"            max="2"            value="1"            list="places"            />          インライン位置        </label>      </p>      <p>        <label>          <input type="checkbox" />          ボックスを越えてスクロールすることを防ぐ        </label>      </p>    </fieldset>    <p>      <label><input type="checkbox" /> スナップを無効化</label>    </p>    <datalist>      <option value="0">start</option>      <option value="1">center</option>      <option value="2">end</option>    </datalist>  </div></article>

li {  /*  starts with:      scroll-snap-align: center center;      scroll-snap-stop: normal (defaults);  コントロールを変更すると、JavaScript によって CSS が変更されます。  以下を設定できます。      scroll-snap-stop: always | normal;      scroll-snap-align: start | center | end {2}        */}ul {  overflow: auto;  scroll-snap-type: both mandatory;  overscroll-behavior-x: contain;}article.snapDisabled fieldset {  opacity: 20%;  pointer-events: none;}article.snapDisabled ul {  scroll-snap-type: initial;  overscroll-behavior-x: initial;}@layer page-setup {  article {    display: flex;    gap: 2vw;  }  div {    flex: 1;  }  ul {    display: grid;    gap: 6.25vw;    padding: 12.5vw;    box-sizing: border-box;    border: 1px solid;    grid-template-columns: repeat(5, 1fr);    background: conic-gradient(      at bottom left,      red 0deg,      yellow 15deg,      green 30deg,      blue 45deg,      purple 60deg,      magenta 75deg    );    background-attachment: local;    margin: auto;    width: 20vw;    height: 20vw;  }  li {    scroll-snap-align: center;    height: 12.5vw;    width: 12.5vw;    outline: 3px inset;    list-style-type: none;    background: white;    font-family: monospace;    font-size: 3rem;    line-height: 12vw;    text-align: center;    counter-increment: items 1;  }  li::after {    content: counter(items);  }  input {    vertical-align: bottom;  }  p {    font-family: monospace;  }}

スクロールスナップを使用すると、スクロールした番号付きボックスの 1 つが所定の位置にスナップします。初期 CSS では、番号付きボックスはビューポートの中央にスナップします。スライダーを使用して、ブロックおよびインラインのスナップ位置を変更します。

スナッププロパティを使用すると、要素（この場合は番号付きボックス）をスクロールして越えることを許可またはブロックすることができます。「ボックスを越えてスクロールしない」チェックボックスを選択すると、すべてのスクロール操作が隣接するボックスへのスクロールに制限されます。

スクロールスナップと通常のスクロールを比較するには、「スナップを無効にする」チェックボックスをオンにして、もう一度スクロールしてみてください。

SnapEventExperimental
- SnapEvent.snapTargetBlockExperimental
- SnapEvent.snapTargetInlineExperimental

ガイド

CSS スクロールスナップの基本概念: CSS のスクロールスナップ機能の概要と例です。
スクロールスナップイベントの使用: スクロールスナップイベントであるscrollsnapchanging およびscrollsnapchange の使用方法に関するガイドです。ブラウザーが新しいスナップターゲットが保留中または選択されていると判断したときに発生します。