---
title: CSS スクロールスナップ
slug: Web/CSS/CSS_Scroll_Snap
tags:
  - CSS
  - CSS スクロールスナップ
  - Guide
  - 概要
  - Reference
translation_of: Web/CSS/CSS_Scroll_Snap
---
{{CSSRef}}

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

## リファレンス

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

- {{cssxref("scroll-snap-type")}}
- {{cssxref("scroll-padding")}}
- {{cssxref("scroll-padding-top")}}
- {{cssxref("scroll-padding-right")}}
- {{cssxref("scroll-padding-bottom")}}
- {{cssxref("scroll-padding-left")}}
- {{cssxref("scroll-padding-inline")}}
- {{cssxref("scroll-padding-inline-start")}}
- {{cssxref("scroll-padding-inline-end")}}
- {{cssxref("scroll-padding-block")}}
- {{cssxref("scroll-padding-block-start")}}
- {{cssxref("scroll-padding-block-end")}}

### 子の CSS プロパティ

- {{cssxref("scroll-snap-align")}}
- {{cssxref("scroll-margin")}}
- {{cssxref("scroll-margin-top")}}
- {{cssxref("scroll-margin-right")}}
- {{cssxref("scroll-margin-bottom")}}
- {{cssxref("scroll-margin-left")}}
- {{cssxref("scroll-margin-inline")}}
- {{cssxref("scroll-margin-inline-start")}}
- {{cssxref("scroll-margin-inline-end")}}
- {{cssxref("scroll-margin-block")}}
- {{cssxref("scroll-margin-block-start")}}
- {{cssxref("scroll-margin-block-end")}}
- {{cssxref("scroll-snap-stop")}}

## ガイド

- [CSS スクロールスナップの基本概念](/ja/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)
- [ブラウザーの互換性とスクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)

## 仕様書

| 仕様書                                 | 状態                                | 備考     |
| -------------------------------------- | ----------------------------------- | -------- |
| {{SpecName("CSS Scroll Snap Points")}} | {{Spec2("CSS Scroll Snap Points")}} | 初回定義 |

## ブラウザーの互換性

個々のプロパティページにて、それぞれのプロパティのブラウザー互換性情報を詳しく説明しています。

> **Note:** このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、[ブラウザーの互換性のガイド](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)を参照してください。