Scroll snap (スクロールスナップ)

スクロールスナップとは、スクロール操作が完了した際に、コンテンツが自由な位置で停止するのではなく、特定の位置に「吸い寄せられる」ように移動する機能です。通常のスクロール操作では、正確性に欠けます。段落、文章、画像の境界で止まるわけではないからです。例えば、カルーセルでは、スクロール操作が画像の途中で完了し、画像の一部が部分的にしか表示されない状態になることがあります。ウェブ開発者は長い間、 JavaScript ベースの解決策に頼ってきました。最近では、ブラウザーが CSS スクロールスナップ機能に対応し始め、スクロールスナップコンテナーとその動作を定義することができるようになりました。

スクロールスナップは、スクロールの操作性をうまく制御するためのもので、ある要素をスクロール操作の境界のあるスクロールコンテナーとして定義します。スクロール操作は、これらのスナップ位置の境界で完了し、スクロールされたコンテンツが所定の位置にスナップします。例えば、上記カルーセルの例では、ユーザーがカルーセルのスクロールを完了すると、表示されている画像が所定の位置にスナップします。

スクロールスナップコンテナー

スクロールスナップコンテナーは、スクロールスナップが適用されたスクロールコンテナーです。例えば、ボックスをあふれるコンテンツがあり、 scroll-snap-type が none 以外の値に設定されている場合、ボックスはスナップ位置を捕捉します。ボックスのスクロールスナップコンテナーは、要素の最も近いスナップ位置を捕捉するスクロールコンテナーの祖先です。ボックスにスクロールスナップコンテナーがない場合、スナップ位置が存在してもスナップは行われません。

スナップポート

スナップポートとは、スナップ位置を計算する際に、スクロールスナップ領域の配置コンテナーとして使用されるスクロールポートの領域です。 既定では、スクロールコンテナーの視覚的なビューポートと同じですが、 scroll-padding プロパティで定義するスクロールポートの領域です。スナップ領域はスクロールポートに配置されます。

スナップ領域

スクロールコンテナーにおける要素のスナップ領域とは、その要素に指定された scroll-margin アウトセットを使用して定義された領域です。スナップ領域は、要素をそのスナップポートにスナップさせるために使用されます。

スナップターゲット

コンテナーがスクロールしたときにスナップされる、スクロールスナップコンテナーの中に含まれる子孫要素。 scroll-snap-align プロパティは、各スナップターゲットのスナップ位置を定義します。