MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

scroll-snap-type

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

摘要

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

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

初始值none
适用元素scroll containers
是否是继承属性
适用媒体interactive
计算值as specified
是否适用于 CSS 动画
正规顺序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 Points Module Level 1
scroll-snap-type
Working Draft Initial definition

浏览器兼容性

特性 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,