scroll-snap-points-y

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

摘要

scroll-snap-points-y CSS属性定义滚动容器中内容的snap点的垂直位置。

初始值none
适用元素scroll containers
是否是继承属性否
Percentagesrelative to same axis of the padding-box of the scroll container
适用媒体interactive
计算值as specified, but with relative lengths converted into absolute lengths
Animation typediscrete
正规顺序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优先级，默认不可用。