scroll-snap-stop

scroll-snap-stop CSS 属性定义了是否允许滚动容器“越过”可能的捕捉位置。

试一试

语法

css

/* Keyword values */
scroll-snap-stop: normal;
scroll-snap-stop: always;

/* Global values */
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;

值

normal: 当此元素的滚动容器的视觉视口滚动时，它可能会“越过”可能的捕捉位置。
always: 滚动容器不得“越过”可能的捕捉位置；并且必须捕捉到此元素的第一个捕捉位置。

正式定义

初始值	`normal`
应用于	所有元素
继承	否
计算值	按指定
动画类型	离散

正式语法

scroll-snap-stop = 
  normal  |
  always

示例

设置不同的捕捉停止

下面的示例演示了scroll-snap-stop的always和normal值的对比。当scroll-snap-type属性设置为mandatory时，两个scroll-snap-stop值的差异会更加明显，本示例中使用了此值。

HTML

html

<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

CSS

/* setup */
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
  text-align: center;
}

div[class] {
  font-size: 3rem;
  display: flex;
  overflow: auto;
  flex: none;
}

.x {
  width: 50%;
  min-width: 15rem;
  height: 6rem;
  flex-flow: row nowrap;
}

.y {
  width: 30%;
  min-width: 12rem;
  height: 12rem;
  flex-flow: column nowrap;
}

div > div {
  flex: none;
  outline: 1px solid #333;
}

.x > div {
  width: 90%;
  height: 100%;
}

.y > div {
  width: 100%;
  height: 80%;
}

/* coloration */
div > div:nth-child(even) {
  background-color: #87ea87;
}

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

css

/* setting up mandatory scroll-snap on parent */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/* defining scroll-snap alignment on children */
div > div {
  scroll-snap-align: center;
}

/* defining scroll-snap stop on children */
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}

结果

分别在下面的 X 和 Y 框中从左到右和从上到下滚动。在scroll-snap-stop属性设置为always的 X 和 Y 框中，即使快速滚动，滚动也会强制停止在捕捉点。但是，在scroll-snap-stop属性设置为normal的框中，快速滚动时会跳过捕捉点。

如果需要，您可以选择性地控制哪些项目在滚动容器内始终被always停止。下面的示例演示了如何通过定位奇数和偶数项目来实现这一点；您可以根据您的需求选择不同的策略。在下面的示例中，滚动分别不会“越过”第二个和第三个方框中的奇数和偶数项目。

规范

规范
CSS Scroll Snap 模块级别 1 # scroll-snap-stop

浏览器兼容性

BCD 表格仅在浏览器中加载