scroll-snap-type

摘要

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

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

语法

/* 关键值 */
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;
}

规范

浏览器兼容性

[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 layout.css.vertical-text.enabled优先级，默认不可用。