scroll-snap-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

scroll-snap-align 属性将盒子的吸附位置指定为其吸附区域（作为对齐对象）在其吸附容器的吸附口（作为对齐容器）中的对齐方式。其两值分别指定了在块向轴盒行向轴上的吸附对齐方式。若仅指定一值，则第二值默认为同一值。

尝试一下

scroll-snap-align: start;

scroll-snap-align: end;

scroll-snap-align: center;

<section class="default-example" id="default-example">
  <div id="example-parent">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

#example-parent {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

#example-parent > div {
  flex: 0 0 66%;
  width: 250px;
  background-color: rebeccapurple;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-parent > div:nth-child(even) {
  background-color: #fff;
  color: rebeccapurple;
}

语法

css
/* 关键字值 */
scroll-snap-align: none;
scroll-snap-align: start end; /* 当设置两值时，第一值为块向，第二值为行向 */
scroll-snap-align: center;

/* 全局值 */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

取值

none

此盒在此轴上未定义吸附位置。

start

此盒的滚动吸附区域在滚动容器的吸附口中的首对齐为此轴上的吸附位置。

end

此盒的滚动吸附区域在滚动容器的吸附口中的末对齐为此轴上的吸附位置。

center

此盒的滚动吸附区域在滚动容器的吸附口中的居中对齐为此轴上的吸附位置。

形式定义

初始值none
适用元素所有元素
是否是继承属性否
计算值as specified
动画类型离散值

形式语法

scroll-snap-align = 
  [ none | start | end | center ]{1,2}

规范

Specification
CSS Scroll Snap Module Level 1
# scroll-snap-align

浏览器兼容性

参见