试一试
scroll-margin: 0;
scroll-margin: 20px;
scroll-margin: 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 .info {
inline-size: 100%;
padding: 0.5em 0;
font-size: 90%;
writing-mode: vertical-rl;
}
.scroller {
text-align: left;
height: 250px;
width: 270px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: y mandatory;
}
.scroller > div {
flex: 0 0 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: 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 包含一个带有四个子元素的滚动器
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
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，它规定滚动吸附必须沿水平轴发生，并且滚动将始终停在吸附点上。
子元素的样式如下
.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 轴的“起点”）是指定的吸附点。
最后，我们为第二个和第三个子元素指定不同的滚动外边距值
.scroller > div:nth-child(2) {
scroll-margin: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin: 2rem;
}
这意味着当滚动经过中间的子元素时，滚动将吸附到第二个 <div> 左边缘以外 1rem，以及第三个 <div> 左边缘以外 2rem 的位置。
注意：这里我们一次性设置了所有边上的 scroll-margin，但只有起始边缘是真正相关的。这里只在该边缘设置滚动外边距也能很好地工作，例如使用 scroll-margin-inline-start: 1rem 或 scroll-margin: 0 0 0 1rem。
结果
自己尝试一下
规范
| 规范 |
|---|
| CSS 滚动捕捉模块级别 1 # scroll-margin |
浏览器兼容性
加载中…