1. Web
  2. CSS
  3. scroll-margin-inline-start

scroll-margin-inline-start

Baseline 已广泛支持

此功能已成熟，并可在多种设备和浏览器版本上运行。自 2021 年 9 月起，所有浏览器均已支持此功能。

scroll-margin-inline-start 属性定义了滚动捕捉区域在行内维度起始端的边距，用于将此框捕捉到捕捉端口。滚动捕捉区域的确定方式是：获取变换后的边框，找到其矩形边界框（在滚动容器的坐标空间中轴对齐），然后添加指定的外部偏移。

试一试

scroll-margin-inline-start: 0;

scroll-margin-inline-start: 20px;

scroll-margin-inline-start: 2em;

<section class="default-example" id="default-example">
  <div class="scroller">
    <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%;
}

.scroller {
  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;
}

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

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

语法

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

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

值

<length>

从滚动容器行内起始边缘向外的偏移。

正式定义

初始值0
应用于所有元素
继承性否
计算值同指定值
动画类型按计算值类型

正式语法

scroll-margin-inline-start = 
  <length>

示例

基本演示

此示例实现了与上述交互式示例非常相似的功能，不同之处在于我们将在此处向您解释其实现方式。

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

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 black;
  scroll-snap-type: x mandatory;
}

与滚动吸附相关的主要部分是 overflow-x: scroll，它确保内容将滚动而不是被隐藏，以及 scroll-snap-type: x mandatory，它规定滚动吸附必须沿水平轴发生，并且滚动将始终停在吸附点上。

子元素的样式如下

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

.scroller > div:nth-child(2n) {
  background-color: white;
  color: rebeccapurple;
}

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

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

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

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

这意味着当滚动经过中间的子元素时，滚动会捕捉到第二个 <div> 的行内起始边缘之外 1rem 处，以及第三个 <div> 的行内起始边缘之外 2rem 处。

结果

自己尝试一下

规范

规范
CSS 滚动捕捉模块级别 1
# margin-longhands-logical

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.