CSS scroll snap(スクロールスナップ)
スクロール位置を決まった地点にぴたりと止める CSS の機能。画像ごとにきれいに止まるカルーセルや、ページ単位で切り替わるレイアウトを JavaScript なしで作れる。
仕組みは単純で、コンテナに scroll-snap-type(例: x mandatory なら横方向に必ずスナップ)を、子要素に scroll-snap-align(start、center、end のどこで止まるか)を指定する。ユーザーがスクロールやスワイプをすると、ブラウザが最も近いスナップ位置へなめらかに落ち着かせる。用途は画像カルーセル、商品ギャラリー、ページ単位のオンボーディング、横並びの「ストーリー」帯など。
以前は Swiper のような重い JS ライブラリが必要で、動きもぎこちなかった。いまはブラウザ標準で、滑らかでハードウェア支援も効く。細かい調整には scroll-behavior: smooth や scroll-margin / scroll-padding を併用する。JavaScript の領分だったことを CSS が引き取っていく好例である。