试一试
scroll-margin-inline: 0;
scroll-margin-inline: 40px 20px;
scroll-margin-inline: 4em 0;
scroll-margin-inline: 0px 3em;
<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: end;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
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;
值
<length>-
从滚动容器的相应边缘向外扩展的距离。
描述
滚动边距值表示用于将此框捕捉到捕捉端口的滚动捕捉区域的偏移量。滚动捕捉区域的确定方式是：获取变换后的边框，找到其矩形边界框（在滚动容器的坐标空间中与轴对齐），然后添加指定的偏移量。
正式定义
正式语法
scroll-margin-inline =
<length>{1,2}
示例
基本演示
此示例实现了与上述交互式示例非常相似的功能，不同之处在于我们将在此处向您解释其实现方式。
这里的目的是创建四个水平滚动的块，其中第二个和第三个块能吸附到位，靠近但并非完全位于每个块的右侧。
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: end;
}
.scroller > div:nth-child(2n) {
background-color: white;
color: rebeccapurple;
}
这里最相关的部分是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>的行内结束边缘之外的2rem处。
注意：这里我们在行内轴（在我们的例子中是x轴）的起点和终点设置了scroll-margin，但实际上只有终点边缘是相关的。这里只在该边缘设置一个滚动边距也能正常工作，例如使用scroll-margin-inline: 0 1rem，或者scroll-margin-inline-end: 1rem。
结果
自己尝试一下
规范
| 规范 |
|---|
| CSS 滚动捕捉模块级别 1 # propdef-scroll-margin-inline |
浏览器兼容性
加载中…