【CSS Modules】scroll-snap-alignプロパティの使い方

scroll-snap-alignプロパティは、スクロールコンテナの子要素がスクロールの停止位置にどのように位置合わせされるかを定義するプロパティです。このプロパティは、ユーザーがスクロール操作を行った際に、コンテンツの特定の区切りが自動的に所定の位置に「スナップ（ぴたりと合う）」する挙動を制御するために使用されます。

具体的には、スクロール可能な親要素（スクロールコンテナ）の内部にある子要素に対してこのプロパティを設定することで、子要素のどの部分を親要素の表示領域のどこに合わせるかを指定します。設定できる主な値は start、end、center、そして none です。例えば、start を設定すると、子要素の開始位置がスクロールコンテナの表示領域の開始位置に合わせられて停止します。同様に、end は子要素の終了位置をスクロールコンテナの終了位置に、center は子要素の中央をスクロールコンテナの中央に合わせます。none はスナップの整列基準がないことを意味し、通常のスナップ動作に影響を与えません。

このプロパティは、画像ギャラリーやカルーセル、ページ分割されたコンテンツなど、ユーザーにコンテンツを一つずつ見せたい場合に特に有効です。親要素には scroll-snap-type プロパティが設定されている必要があり、これによりスクロールスナップ機能が有効になります。scroll-snap-align を scroll-snap-type と組み合わせて使用することで、より直感的でユーザーフレンドリーなスクロール体験を提供し、コンテンツの視認性と操作性を向上させることができます。

Copy
1scroll-snap-align: start;

引数なし

引数はありません

戻り値なし

戻り値はありません