此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
scroll-margin-block
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.
简写属性scroll-margin-block 设置了元素的块向滚动外边距。
尝试一下
scroll-margin-block: 0;scroll-margin-block: 20px;scroll-margin-block: 2em;<section> <div> <div>1</div> <div>2</div> <div>3</div> </div> <div>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 属性的简写属性：
语法
css
/* <length> 值 */scroll-margin-block: 10px;scroll-margin-block: 1em 0.5em;/* 全局值 */scroll-margin-block: inherit;scroll-margin-block: initial;scroll-margin-block: revert;scroll-margin-block: revert-layer;scroll-margin-block: unset;取值
<length>滚动容器对应边的外边距。
描述
scroll-margin 值表示定义滚动吸附区域的外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。
形式定义
| 初始值 | 该简写所对应的每个属性： |
|---|---|
| 适用元素 | 所有元素 |
| 是否是继承属性 | 否 |
| 计算值 | 该简写所对应的每个属性：
|
| 动画类型 | 按计算值的类型 |
形式语法
scroll-margin-block =
<length>{1,2}
规范
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block |