CSS スクロールスナップ

CSS スクロールスナップは CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。

メモ: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。

リファレンス

コンテナーの CSS プロパティ

• scroll-snap-type
• scroll-snap-stop
• scroll-padding
• scroll-padding-top
• scroll-padding-right
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-inline
• scroll-padding-inline-start
• scroll-padding-inline-end
• scroll-padding-block
• scroll-padding-block-start
• scroll-padding-block-end

子の CSS プロパティ

• scroll-snap-align
• scroll-margin
• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-inline
• scroll-margin-inline-start
• scroll-margin-inline-end
• scroll-margin-block
• scroll-margin-block-start
• scroll-margin-block-end

仕様書

仕様書	状態	備考
CSS Scroll Snap Module Level 1	勧告候補	初回定義

ブラウザーの対応