CSS 属性 scroll-margin-block-start 允许您控制 snapport 的块轴（在 LTR 语言中通常是顶部）起点的边距。
此区域的计算方法是采用已修改的边框，在滚动容器的坐标系内找到其矩形边界框，然后添加指定的输出点。
可能的值
- <length> - 滚动容器的块起始边缘的偏移量。
适用于
所有元素
语法
CSS scroll-margin-block-start - 基本示例
以下示例演示了 scroll-margin-block-start 属性的用法。
CSS 属性 scroll-margin-block-start 允许您控制 snapport 的块轴（在 LTR 语言中通常是顶部）起点的边距。
此区域的计算方法是采用已修改的边框，在滚动容器的坐标系内找到其矩形边界框，然后添加指定的输出点。
所有元素
scroll-margin-block-start = <length>以下示例演示了 scroll-margin-block-start 属性的用法。
<html>
<head>
<style>
#demoScroll {
width: 90%;
aspect-ratio: 16/9;
padding: 20px;
margin: auto;
border: solid 3px #333;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snap-block {
width: 90%;
aspect-ratio: 16/9;
scroll-snap-align: start none;
scroll-margin-block-start: 50px;
border-radius: 20px;
}
.blue { background-color: #3498db; }
.green { background-color: #27ae60; }
.yellow { background-color: #f39c12; }
.red { background-color: #e74c3c; }
.purple { background-color: #9b59b6; }
</style>
</head>
<body>
<h3>scroll-margin-block-start</h3>
<p>Scroll through the colorful blocks.</p>
<div id="demoScroll">
<div class="snap-block blue"></div>
<div class="snap-block green"></div>
<div class="snap-block yellow"></div>
<div class="snap-block red"></div>
<div class="snap-block purple"></div>
</div>
</body>
</html>