这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
摘要
scroll-snap-points-x CSS属性定义滚动容器中内容的snap点的水平位置。
| 初始值 | none |
|---|---|
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to same axis of the padding-box of the scroll container |
| 适用媒体 | interactive |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* 关键值 */ 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;
取值
none- 滚动容器没有定义任何snap点。Elements within the scroll container may still define snap points of behalf of the scroll container.（i don't understand this statement）
repeat(<长度>)- 定义snap点的一个间隔，从容器相关的边缘开始。仅允许正数长度。
正式语法
none | repeat(<length>)
示例
HTML内容
<div id="container"> <div>1</div> <div>2</div> <div>3</div> </div>
CSS内容
#container {
width: 200px;
overflow: auto;
white-space: nowrap;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
font-size: 0;
}
#container > div {
width: 200px;
height: 200px;
display: inline-block;
line-height: 200px;
text-align: center;
font-size: 100px;
}
#container > div:nth-child(even) {
background-color: #87ea87;
}
#container > div:nth-child(odd) {
background-color: #87ccea;
}
规范
此属性曾定义在early draft of CSS Scroll Snap Points Module中，但是后来在in favor of element-based snapping规范中被移除。
浏览器兼容性
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 支持度 | ? | 39.0 (39.0) | 未实现 | 未实现 | 9-webkit |
| 特性 | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 支持度 | 未实现 | 39.0 (39.0)[1] | 39.0 (39.0) | 未实现 | 未实现 | 9-webkit |
[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 layout.css.vertical-text.enabled优先级，默认不可用。