blob: 4d6d4fe2b94a57ccb625798f0337250c846a0033 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
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)を参照してください。
|
