CSS スクロールスナップ

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

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

リファレンス

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

子の CSS プロパティ

仕様書

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

ブラウザーの対応

関連トピック
  1. CSS
  2. CSS リファレンス
  3. CSS Scroll Snap
  4. ガイド
    1. Basic concepts of CSS Scroll Snap [翻訳する]
    2. Browser compatibility and Scroll Snap [翻訳する]
  5. プロパティ
    1. scroll-margin
    2. scroll-margin-block [翻訳する]
    3. scroll-margin-block-end [翻訳する]
    4. scroll-margin-block-start [翻訳する]
    5. scroll-margin-bottom [翻訳する]
    6. scroll-margin-inline [翻訳する]
    7. scroll-margin-inline-end [翻訳する]
    8. scroll-margin-inline-start [翻訳する]
    9. scroll-margin-left [翻訳する]
    10. scroll-margin-right [翻訳する]
    11. scroll-margin-top [翻訳する]
    12. scroll-padding [翻訳する]
    13. scroll-padding-block [翻訳する]
    14. scroll-padding-block-end [翻訳する]
    15. scroll-padding-block-start [翻訳する]
    16. scroll-padding-bottom [翻訳する]
    17. scroll-padding-inline [翻訳する]
    18. scroll-padding-inline-end [翻訳する]
    19. scroll-padding-inline-start [翻訳する]
    20. scroll-padding-left [翻訳する]
    21. scroll-padding-right [翻訳する]
    22. scroll-padding-top [翻訳する]
    23. scroll-snap-align [翻訳する]
    24. scroll-snap-coordinate
    25. scroll-snap-destination
    26. scroll-snap-points-x [翻訳する]
    27. scroll-snap-points-y [翻訳する]
    28. scroll-snap-stop
    29. scroll-snap-type
    30. scroll-snap-type-x [翻訳する]
    31. scroll-snap-type-y [翻訳する]