CSS - scroll-margin-block 属性

CSS 属性 scroll-margin-block 是一个简写属性，用于控制块轴（大多数情况下为垂直轴）处滚动捕捉区域的边距。它定义了 snapport 的 snapport 边缘和 snapport 的滚动容器框之间的边距。

可能的值

<length> - 从滚动容器的相应边缘开始的出口。

成分特性

此属性是以下 CSS 属性的简写：

适用于

所有元素

语法


scroll-margin-block = <length>{1,2}

CSS scroll-margin-block - 基本示例

以下示例演示了 scroll-margin-block 属性的用法。


<html>
<head>
<style>
	 	#demoScroll {
	 	 	 width: 75%;
	 	 	 aspect-ratio: 16/9;
	 	 	 padding: 20px;
	 	 	 margin: auto;
	 	 	 border: solid 3px #ddd;
	 	 	 overflow-x: hidden;
	 	 	 overflow-y: scroll;
	 	 	 scroll-snap-type: y mandatory;
	 	}
	 	.snap-block {
	 	 	 width: 80%;	
	 	 	 aspect-ratio: 4/3;	
	 	 	 scroll-snap-align: start none;
	 	 	 scroll-margin-block: 40px;
	 	}
	 	.blue { background-color: #3498db; }
	 	.green { background-color: #2ecc71; }
	 	.yellow { background-color: #f1c40f; }
	 	.red { background-color: #e74c3c; }
</style>
</head>
<body>
<h3>scroll-margin-block</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>
</body>
</html>

打印本页