scroll-margin-top
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
scroll-margin-top 属性定义了滚动吸附区域的上外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。
尝试一下
scroll-margin-top: 0;
scroll-margin-top: 20px;
scroll-margin-top: 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: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
语法
css
/* <length> 值 */
scroll-margin-top: 10px;
scroll-margin-top: 1em;
/* 全局值 */
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: revert;
scroll-margin-top: revert-layer;
scroll-margin-top: unset;
取值
<length>-
滚动容器的上外边距。
形式定义
形式语法
scroll-margin-top =
<length>
规范
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |