CSS - scroll-margin-inline-start 属性

CSS 属性 scroll-margin-inline-start 通过在水平维度的起点处建立滚动捕捉区域的边距，帮助将框捕捉到捕捉端口。

该面积的计算方法是将指定的出口添加到滚动容器的坐标空间内的修改后的边框的矩形边界框上。

可能的值

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

适用于

所有元素

语法


scroll-margin-inline-start = <length>

CSS scroll-margin-inline-start - 基本示例

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


<html>
<head>
<style>
	 	#demoScroll {
	 	 	 width: 65%;
	 	 	 aspect-ratio: 16/9;
	 	 	 padding: 20px;
	 	 	 margin: auto;
	 	 	 border: solid 3px #333;
	 	 	 overflow-x: auto;	
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;	
	 	}
	 	.snap-block {
	 	 	 width: 100%;	
	 	 	 height: 90%;
	 	 	 scroll-snap-align: start;
	 	 	 scroll-margin-inline-start: 50px;
	 	 	 border-radius: 10px;
	 	 	 background-color: #3498db;
	 	 	 display: inline-block;
	 	}
	 	.color-block:nth-child(2n) {
	 	 	 background-color: #27ae60;	
	 	}
	 	.color-block:nth-child(3n) {
	 	 	 background-color: #f39c12;	
	 	}
	 	.color-block:nth-child(4n) {
	 	 	 background-color: #e74c3c;	
	 	}
	 	.color-block:nth-child(5n) {
	 	 	 background-color: #9b59b6;	
	 	}
</style>
</head>
<body>
<h3>scroll-margin-inline-start</h3>
<p>Scroll through the horizontally scrollable blocks.</p>
<div id="demoScroll">
	 	<div class="snap-block"></div>
	 	<div class="snap-block"></div>
	 	<div class="snap-block"></div>
	 	<div class="snap-block"></div>
	 	<div class="snap-block"></div>
	 	<div class="snap-block"></div>
	 	<div class="snap-block"></div>
</div>
</body>
</html>

打印本页