scroll-margin-inline

Baseline 广泛可用

此功能已经很成熟，可以在许多设备和浏览器版本中使用。它从 2019 年 7 月.

报告反馈

试用

构成属性

scroll-margin-inline 简写属性 设置元素在内联尺寸上的滚动边距。

语法

此属性是以下 CSS 属性的简写
/* <length> values */
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

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

css

<length>

值

描述

从滚动容器的相应边缘的偏移量。

正式定义

滚动边距值代表偏移量，用于定义滚动捕捉区域，该区域用于将此框捕捉到捕捉点。滚动捕捉区域是通过获取变换后的边框框，找到其矩形边界框（在滚动容器的坐标空间中轴对齐），然后添加指定的偏移量来确定的。初始值
scroll-margin-inline-end: 0适用于
所有元素继承
否初始值
scroll-margin-inline-end: 按指定值动画类型

正式语法

scroll-margin-inline = 
  <length>{1,2}

示例

按计算值类型

简单演示

此示例实现了与上面的交互式示例非常类似的功能，只是在这里我们将向您解释它是如何实现的。

HTML

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

表示这些块的 HTML 代码非常简单
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

html

此属性是以下 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;
}

让我们逐步介绍 CSS 代码。外部容器的样式如下所示

与滚动捕捉相关的关键部分是 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: end;
}

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

子元素的样式如下所示

这里最相关的部分是 scroll-snap-align: end，它指定右边缘（在本例中，是 x 轴的“结束”）是指定的捕捉点。

此属性是以下 CSS 属性的简写
.scroller > div:nth-child(2) {
  scroll-margin-inline: 1rem;
}

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

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

注意：这里我们在内联轴的开头和结尾（在本例中为 x 轴）设置了scroll-margin，但实际上只有结束边缘是相关的。在这里，只在该边缘设置滚动边距也能正常工作，例如使用scroll-margin-inline: 0 1rem或scroll-margin-inline-end: 1rem。

结果

自己试试

规范

规范
CSS Scroll Snap 模块 1 级
# propdef-scroll-margin-inline

浏览器兼容性

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

另请参阅