CSS スクロールスナップの基本概念

スクロールスナップ仕様の主要なプロパティは、scroll-snap-type と scroll-snap-align です。scroll-snap-type プロパティは、スクロールの種類と方向を指定するために、スクロールコンテナーで使用されます。

scroll-snap-align プロパティは子要素で、スクロールがスナップする位置を設定するために使用する必要があります。以下の例では y 軸に沿ってスクロールをスナップさせるために、scroll-snap-align をセクション要素に使用してスクロールを停止する位置を指定しています。

scroll-snap-type プロパティは、スクロールスナップが発生する方向を指定する必要があります。これには x や y、論理マッピングの block や inline などがあります。また、キーワード both を使用すると、スクロールスナップが両軸で動作するようになります。

また、mandatory や proximity のキーワードを渡すこともできます。mandatory キーワードは、スクロールの位置に関係なく、コンテンツが特定の位置にスナップしなければならないかどうかをブラウザーに伝えます。proximity キーワードは、その位置にスナップしてもよいが、しなくてもよいことを意味します。

mandatory を使用すると、とても一貫した操作感が得られます。つまり、ブラウザーは定義された各位置に必ずスナップすることがわかります。つまり、画面の上部にあると期待されるものが、スクロールが終了したときにあると確信できるのです。しかし、コンテンツが予想以上に大きい場合には、問題が発生する可能性があります。ユーザーは、スクロールしてもコンテンツの特定の位置を見ることができないという、もどかしい状況に陥るかもしれません。そのため、mandatory の使用は慎重に検討し、一度に画面に表示されるコンテンツの量が分かっている場合にのみ使用するようにしてください。

proximity の値は、近くにある場合にのみ位置にスナップしますが、正確な距離はブラウザーの判断に委ねられています。以下の例では、mandatory と proximity の間で値を変更し、スクロールの操作感に与える影響を確認することができます。

scroll-snap-align プロパティには、スクロールコンテナ内でコンテンツがスナップするポイントを示す、start、end、center の値を取ることができます。以下の例では、scroll-snap-align の値を変更することで、スクロールの動作がどのように変化するかを確認できます。

スクロールコンテナーの端にコンテンツをスナップさせたくない場合は、scroll-padding プロパティまたはそれに相当する個別指定の値を使ってパディングを設定することができます。

以下の例では、scroll-padding を 40 ピクセルに設定しています。2 つ目と 3 つ目のセクションの開始点にスナップすると、スクロールはセクションの開始点から 40 ピクセル離れたところで止まります。scroll-padding の値を変更して、距離の変化を確認してみてください。

これは、例えばナビゲーションバーなどの固定要素があり、スクロールしたコンテンツと重なってしまう場合に便利です。scroll-padding を使用すると、下の例のように、コンテンツがスクロールしても <h1> が画面上に残るように、見出しのための空間を確保することができます。パディングがないと、スナップが発生したときに見出しがコンテンツの一部と重なってしまいます。

scroll-margin プロパティは、子要素に設定することができ、定義されたボックスの外側を定義することができます。これにより、子要素ごとに異なるスペースを確保することができ、親要素の scroll-padding と組み合わせて使用することができます。以下の例で試してみてください。

scroll-snap-stop プロパティは、定義された各スナップ位置にスナップするかどうか — つまり上記の例では、それぞれのセクションの先頭で停止するか、またはセクションをスキップできるかどうか — をブラウザーに伝えます。このプロパティは、他の仕様に比べて実装しているブラウザーが少ないです。

このプロパティは、ユーザーがスクローラーの各セクションを確実に確認し、誤ってスキップしてしまわないようにするのに役立ちます。しかし、ユーザーが特定のセクションを探している場合、スクロールの速度が遅くなるという問題があります。

個々のプロパティページでは、スクロールスナップについてブラウザーの互換性の状況を詳しく説明しています。なお、Firefox 68 以前の Firefox は、古いバージョンの仕様を実装していました。新旧両方の仕様をサポートするクロスブラウザー対応のコードを書く方法の概要については、次のガイドをお読みください。