blob: 740993e96df8ffd6a4b8514c21175b577af59213 (
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
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
153
154
155
156
|
---
title: scroll-snap-coordinate
slug: Web/CSS/scroll-snap-coordinate
tags:
- CSS
- CSS スクロールスナップ
- CSS プロパティ
- Deprecated
- Reference
- scroll-snap-coordinate
translation_of: Web/CSS/scroll-snap-coordinate
---
<div>{{CSSRef}}{{deprecated_header}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p>
<pre class="brush:css no-line-numbers">/* キーワード値 */
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;</pre>
<p>要素が変形されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。</p>
<div>{{cssinfo}}</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>none</code></dt>
<dd>要素がスナップ点を提供しないことを示します。</dd>
<dt>{{cssxref("<position>")}}</dt>
<dd>スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Example", "100%", "170")}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
<td>{{Spec2("CSS Scroll Snap Points")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p>
|
