files/ja/web/css/scroll-snap-coordinate/index.md


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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

---
title: scroll-snap-coordinate
slug: Web/CSS/scroll-snap-coordinate
tags:
  - CSS
  - CSS プロパティ
  - CSS スクロールスナップ
  - 非推奨
  - Reference
  - recipe:css-property
browser-compat: css.properties.scroll-snap-coordinate
translation_of: Web/CSS/scroll-snap-coordinate
---
{{CSSRef}}{{deprecated_header}}

**`scroll-snap-coordinate`** は [CSS](/ja/docs/Web/CSS)のプロパティで、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。

```css
/* キーワード値 */
scroll-snap-coordinate: none;

/* <position> 値 */
scroll-snap-coordinate: 50px 50px;                   /* 単一の座標 */
scroll-snap-coordinate: 100px 100px, 100px bottom;   /* 複数の座標 */

/* グローバル値 */
scroll-snap-coordinate: inherit;
scroll-snap-coordinate: initial;
scroll-snap-coordinate: unset;
```

要素が変換されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。

## 構文

### 値

- `none`
  - : 要素がスナップ点を提供しないことを示します。
- {{cssxref("&lt;position&gt;")}}
  - : スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。

## 公式定義

{{cssinfo}}

## 形式文法

{{csssyntax}}

## 例

<h3 id="Setting_scroll_snap_coordinates">スクロールスナップ座標の設定</h3>

#### HTML

```html
<div id="container">
  <div>
    <p>At coordinate (0, 0)</p>
    <div class="scrollContainer coordinate0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (25, 0)</p>
    <div class="scrollContainer coordinate25">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (50, 0)</p>
    <div class="scrollContainer coordinate50">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
</div>
```

#### CSS

```css
#container {
  display: flex;
}

#container > div:nth-child(-n+2) {
  margin-right: 20px;
}

.scrollContainer {
  width: 100px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-type: mandatory;
  font-size: 0;
}

.scrollContainer > div {
  width: 100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.coordinate0 > div {
  scroll-snap-coordinate: 0 0;
}

.coordinate25 > div {
  scroll-snap-coordinate: 25px 0;
}

.coordinate50 > div {
  scroll-snap-coordinate: 50px 0;
}

.scrollContainer > div:nth-child(even) {
  background-color: #87ea87;
}

.scrollContainer > div:nth-child(odd) {
  background-color: #87ccea;
}
```

#### 結果

{{EmbedLiveSample("Setting_scroll_snap_coordinates", "100%", "170")}}

## 仕様書

どの標準にも含まれていません。

## ブラウザーの互換性

{{Compat}}

## 関連情報

- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)
- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)