scroll-snap-type

scroll-snap-type CSS 属性设置了在存在滚动容器的情况下，如何严格地强制滚动容器上的捕捉点。

试一下

此属性未涵盖用于强制这些捕捉点的任何精确动画或物理，而是由用户代理决定。

语法

css
/* No snapping */
scroll-snap-type: none;

/* Keyword values for snap axes */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional keyword values for snap strictness */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

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

值

none

当此滚动容器的视觉 视窗 滚动时，它必须忽略捕捉点。

x

滚动容器仅在其水平轴上捕捉到捕捉位置。

y

滚动容器仅在其垂直轴上捕捉到捕捉位置。

block

滚动容器仅在其块轴上捕捉到捕捉位置。

inline

滚动容器仅在其内联轴上捕捉到捕捉位置。

both

滚动容器在其两个轴上独立地捕捉到捕捉位置（可能在每个轴上捕捉到不同的元素）。

mandatory

如果此滚动容器的视觉视窗当前未滚动，则它必须捕捉到捕捉位置。

proximity

如果此滚动容器的视觉视窗当前未滚动，则它可能会捕捉到捕捉位置。用户代理根据滚动参数决定是否捕捉。如果指定了任何捕捉轴，则这是默认的捕捉严格度。

注意：如果捕捉端口中的内容发生更改（例如添加、移动、删除或调整大小），或者任何滚动捕捉相关属性（例如 scroll-snap-type 或 scroll-margin）的值发生更改，则滚动容器将根据 scroll-snap-type 的最新值 重新捕捉。

正式定义

初始值none
应用于所有元素
继承no
计算值按指定
动画类型discrete

正式语法

scroll-snap-type = 
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

示例

在不同轴上的捕捉

HTML

html
<div class="holster">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

CSS

css
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

结果

规范

规范
CSS 滚动捕捉模块级别 1
# scroll-snap-type

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅