滚动界限种类 | scroll-snap-type (Scroll Snap) - CSS 中文开发手册 - Break易站

??CSS 中文开发手册

滚动界限种类 | scroll-snap-type (Scroll Snap) - CSS 中文开发手册

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

该scroll-snap-type CSS属性定义捕捉点是如何严格的情况下，有一个滚动容器上强制执行。

指定用于执行这些捕捉点的精确动画或物理属性不属于此属性，而是留给用户代理。

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

语法

值

none当滚动此滚动容器的可视视口时，它必须忽略捕捉点。

mandatory如果当前没有滚动，则此滚动容器的可视视口将停留在捕捉点上。这意味着，如果可能的话，当滚动操作完成时，它会捕捉到这一点。如果内容被添加，移动，删除或调整大小，则会调整滚动偏移以保持该捕捉点上的静止。

proximity如果考虑到用户代理的滚动参数，该滚动容器的视觉视口如果当前没有滚动，则可能停留在快照点上。如果添加，移动，删除或重新调整内容，则可以调整滚动偏移以保持在该捕捉点上的静止。

形式语法

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 中文开发手册