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.styleSheets[0].cssRules;
inlineDirection.addEventListener("change", () => {
 setSSA();
});
blockDirection.addEventListener("change", () => {
 setSSA();
});
stop.addEventListener("change", () => {
 setSST();
});
window.addEventListener("load", () => {
 setSST();
 setSSA();
});
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"
 id="block" />
 ブロック位置</label
 >
 </p>
 <p>
 <label>
 <input
 type="range"
 min="0"
 max="2"
 value="1"
 list="places"
 id="inline" />
 インライン位置
 </label>
 </p>
 <p>
 <label>
 <input type="checkbox" id="stop" />
 ボックスを越えてスクロールすることを防ぐ
 </label>
 </p>
 </fieldset>
 <p>
 <label><input type="checkbox" id="snap" /> スナップを無効化</label>
 </p>
 <datalist id="places">
 <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 pageSetup {
 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 では、番号付きボックスはビューポートの中央にスナップします。スライダーを使用して、ブロックおよびインラインのスナップ位置を変更します。

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

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

scrollsnapchange Experimental
scrollsnapchanging Experimental

インターフェイス

SnapEvent Experimental
- SnapEvent.snapTargetBlock Experimental
- SnapEvent.snapTargetInline Experimental

ガイド

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