We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

摘要

scroll-snap-type CSS属性定义在滚动容器中的一个snap点如何被严格的执行。

此属性不能用来指定任何精确的动画或者物理运动效果来执行snap点,而是交给用户代理来处理。

初始值none
适用元素scroll containers
是否是继承属性
适用媒体interactive
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 关键值 */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;

/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

取值

none
当这个滚动容器的可视的viewport是滚动的,它必须忽略snap点。
mandatory
如果它当前没有被滚动,这个滚动容器的可视视图将静止在snap点上。意思是当滚动动作结束,如果可能,它会snap在那个点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在snap点上。
proximity
如果它当前没有被滚动,这个滚动容器的可视视图将基于基于用户代理滚动的参数去到snap点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在snap点上。

正式语法

none | mandatory | proximity

示例

HTML内容

<div class="container mandatoryScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container proximityScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS内容

.container {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

.mandatoryScrollSnapping {
  margin-bottom: 20px;
  scroll-snap-type: mandatory;
}

.proximityScrollSnapping {
  scroll-snap-type: proximity;
}

.container > div {
  width: 100%;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

规范

规范名称 状态 评论
CSS Scroll Snap Module Level 1
scroll-snap-type
Candidate Recommendation Initial definition

浏览器兼容性

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) 10-ms- 未实现 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优先级,默认不可用。

文档标签和贡献者

标签: 
此页面的贡献者: rockywen
最后编辑者: rockywen,