files/zh-cn/web/css/scroll-snap-points-x/index.html


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

---
title: scroll-snap-points-x
slug: Web/CSS/scroll-snap-points-x
tags:
  - CSS
  - css snap
translation_of: Web/CSS/scroll-snap-points-x
---
<div>{{CSSRef}}{{SeeCompatTable}}{{deprecated_header}}</div>

<h2 id="摘要">摘要</h2>

<p><strong><code>scroll-snap-points-x</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>属性定义滚动容器中内容的snap点的水平位置。</p>

<p>{{cssinfo}}</p>

<h2 id="语法">语法</h2>

<pre class="brush: css">/* 关键值 */
scroll-snap-points-x: none;

/* 重复的snap点 */
scroll-snap-points-x: repeat(400px);

/* 全局值 */
scroll-snap-points-x: inherit;
scroll-snap-points-x: initial;
scroll-snap-points-x: unset;
</pre>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>滚动容器没有定义任何snap点。Elements within the scroll container may still define snap points of behalf of the scroll container.（i don't understand this statement）</dd>
 <dt><code>repeat(&lt;长度&gt;)</code></dt>
 <dd>定义snap点的一个间隔，从容器相关的边缘开始。仅允许正数长度。</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">示例</h2>

<h3 id="HTML内容">HTML内容</h3>

<pre class="brush: html">&lt;div id="container"&gt;
  &lt;div&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div&gt;3&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS内容">CSS内容</h3>

<pre class="brush: css">#container {
  width: 200px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

#container &gt; div {
  width: 200px;
  height: 200px;
  display: inline-block;
  line-height: 200px;
  text-align: center;
  font-size: 100px;
}

#container &gt; div:nth-child(even) {
  background-color: #87ea87;
}

#container &gt; div:nth-child(odd) {
  background-color: #87ccea;
}</pre>

<p>{{EmbedLiveSample("Example", 220, 220)}}</p>

<h2 id="规范">规范</h2>

<p>此属性曾定义在<a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">early draft of CSS Scroll Snap Points Module</a>中，但是后来在<a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">in favor of element-based snapping</a>规范中被<a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">移除</a>。</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>支持度</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("39.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>9{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>支持度</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("39.0")}}<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile("39.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>9{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 <code>layout.css.vertical-text.enabled</code>优先级，默认不可用。</p>