scroll-margin

基线 广泛可用

此功能非常成熟，可在许多设备和浏览器版本中使用。它已在所有浏览器中可用，自 2019 年 7 月.

**scroll-margin** 简写属性 同时设置元素的所有滚动边距，分配值的方式类似于 margin 属性对元素边距的处理。

尝试一下

构成属性

此属性是以下 CSS 属性的简写

语法

css
/* <length> values */
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;

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

值

<length>

从滚动容器的对应边缘向外延伸。

描述

您可以通过滚动到示例内容两个“页面”之间的一部分来查看 scroll-margin 的效果。为 scroll-margin 指定的值决定了主要位于捕捉区域之外的页面应保留可见多少部分。

因此，scroll-margin 值表示定义用于将此盒子捕捉到捕捉区域的滚动捕捉区域的延伸。滚动捕捉区域是通过获取变换后的边框盒子、找到其矩形边界框（在滚动容器的坐标空间中轴对齐），然后添加指定的延伸来确定的。

正式定义

初始值与简写属性的每个属性相同
应用于所有元素
继承否
计算值与简写属性的每个属性相同
动画类型按计算值类型

正式语法

scroll-margin = 
  <length>{1,4}

示例

简单演示

此示例实现了一些与上面的交互式示例非常相似的内容，但在这里我们将向您解释它是如何实现的。

这里的目标是创建四个水平滚动的块，其中第二个和第三个块会捕捉到位置，靠近但不完全位于每个块的左侧。

HTML

表示这些块的 HTML 非常简单

html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

让我们逐步了解 CSS。外部容器的样式如下

css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

与滚动捕捉最相关的部分是 overflow-x: scroll，它确保内容将滚动且不会被隐藏，以及 scroll-snap-type: x mandatory，它规定必须沿水平轴进行滚动捕捉，并且滚动将始终停在捕捉点上。

子元素的样式如下

css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

这里最相关的部分是 scroll-snap-align: start，它指定左侧边缘（在本例中，沿 x 轴的“开始”）是指定的捕捉点。

最后，我们指定滚动边距值，第二个和第三个子元素的值不同

css
.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}

这意味着，当滚动经过中间子元素时，滚动将捕捉到第二个<div>左侧边缘外1rem处，以及第三个<div>左侧边缘外2rems处。

注意：这里我们同时设置了所有方向的scroll-margin，但实际上只有开始边缘是相关的。在这里只设置一个边缘的滚动边距也可以正常工作，例如使用scroll-margin-inline-start: 1rem或scroll-margin: 0 0 0 1rem。

结果

亲自尝试

规范

规范
CSS Scroll Snap 模块 Level 1
# scroll-margin

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。

另请参阅