这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
摘要
scroll-snap-points-y 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 |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* 关键值 */ scroll-snap-points-y: none; /* 重复的snap点 */ scroll-snap-points-y: repeat(400px); /* 全局值 */ scroll-snap-points-y: inherit; scroll-snap-points-y: initial; scroll-snap-points-y: unset;
Values
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-percentage> )where
<length-percentage> = <length> | <percentage>
示例
HTML内容
<div id="container"> <div>1</div> <div>2</div> <div>3</div> </div>
CSS内容
#container {
height: 200px;
width: 220px;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-points-y: repeat(200px);
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规范中被移出。
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| 特性 | 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优先级，默认不可用。