CSS - scroll-padding-inline-start_CSS 菜鸟教程

CSS scroll-padding-inline-start 指定 scrollport 的起始边缘在内联维度中的偏移量。

可能的值

<length-percentage> − 一个有效的长度或百分比值，用于定义与滚动端口的相应边缘的向内偏移量。
<auto> − 由用户代理确定的滚动端口相应边缘的向内偏移量。

适用于

所有滚动容器。

语法

 scroll-padding-inline-start = auto|<length-percentage>

CSS scroll-padding-inline-start - length 值

以下示例演示如何使用 scroll-padding-inline-start 属性，使用长度值（20px）在内联维度中设置 scrollport 起始边缘的偏移量。

<html>
<head>
<style>
	 	#container {
	 	 	 width: 50%;
	 	 	 height: 400px;
	 	 	 aspect-ratio: 3/2;
	 	 	 padding: 0 30px;
	 	 	 border: solid black 2px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x mandatory;
	 	 	 scroll-padding-inline-start: 20px;
	 	}

	 	.boxA {
	 	 	 background-color: rgb(234, 234, 128);
	 	 	 height: 75%;
	 	 	 aspect-ratio: 5/3;
	 	}

	 	.boxB {
	 	 	 background-color: lightblue;
	 	 	 height: 60%;
	 	 	 aspect-ratio: 5/4;
	 	}

	 	.boxA, .boxB {
	 	 	 display: inline-block;
	 	 	 margin: 2px;
	 	 	 scroll-snap-align: none start;
	 	}
</style>
</head>
<body>
	 	<h3>CSS scroll-padding-inline-start property.</h3>
	 	<p>scroll-padding-inline-start property sets the scroll padding of an element for the start edge in the inline dimension.</p>

	 	<div id="container">
	 	 	 <div class="boxA"></div>
	 	 	 <div class="boxB"></div>
	 	 	 <div class="boxA"></div>
	 	 	 <div class="boxB"></div>
	 	 	 <div class="boxA"></div>
	 	</div>
</body>
</html>

CSS scroll-padding-inline-start - 百分比值

以下示例演示如何使用 scroll-padding-inline-start 属性，通过百分比值（60%）在内联维度中设置滚动端口起始边缘的偏移量。

<html>
<head>
<style>
	 	#container {
	 	 	 width: 50%;
	 	 	 height: 400px;
	 	 	 aspect-ratio: 3/2;
	 	 	 padding: 0 30px;
	 	 	 border: solid black 2px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x mandatory;
	 	 	 scroll-padding-inline-start: 60%;
	 	}

	 	.boxA {
	 	 	 background-color: rgb(234, 234, 128);
	 	 	 height: 75%;
	 	 	 aspect-ratio: 5/3;
	 	}

	 	.boxB {
	 	 	 background-color: lightblue;
	 	 	 height: 60%;
	 	 	 aspect-ratio: 5/4;
	 	}

	 	.boxA, .boxB {
	 	 	 display: inline-block;
	 	 	 margin: 2px;
	 	 	 scroll-snap-align: none start;
	 	}
</style>
</head>
<body>
	 	<h3>CSS scroll-padding-inline-start property.</h3>
	 	<p>scroll-padding-inline-start property sets the scroll padding of an element for the start edge in the inline dimension.</p>

	 	<div id="container">
	 	 	 <div class="boxA"></div>
	 	 	 <div class="boxB"></div>
	 	 	 <div class="boxA"></div>
	 	 	 <div class="boxB"></div>
	 	 	 <div class="boxA"></div>
	 	</div>
</body>
</html>

CSS scroll-padding-inline-start - auto 值

以下示例演示如何使用 scroll-padding-inline-start 属性，通过关键字值（auto）设置内联维度中 scrollport（div 元素）的起始边缘的偏移量。

<html>
<head>
<style>
	 	#container {
	 	 	 width: 50%;
	 	 	 height: 400px;
	 	 	 aspect-ratio: 3/2;
	 	 	 padding: 0 30px;
	 	 	 border: solid black 2px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x mandatory;
	 	 	 scroll-padding-inline-start: auto;
	 	}

	 	.boxA {
	 	 	 background-color: rgb(234, 234, 128);
	 	 	 height: 75%;
	 	 	 aspect-ratio: 5/3;
	 	}

	 	.boxB {
	 	 	 background-color: lightblue;
	 	 	 height: 60%;
	 	 	 aspect-ratio: 5/4;
	 	}

	 	.boxA, .boxB {
	 	 	 display: inline-block;
	 	 	 margin: 2px;
	 	 	 scroll-snap-align: none start;
	 	}
</style>
</head>
<body>
	 	<h3>CSS scroll-padding-inline-start property.</h3>
	 	<p>scroll-padding-inline-start property sets the offsets of the start edge of the scrollport in the inline dimension.</p>

	 	<div id="container">
	 	 	 <div class="boxA"></div>
	 	 	 <div class="boxB"></div>
	 	 	 <div class="boxA"></div>
	 	 	 <div class="boxB"></div>
	 	 	 <div class="boxA"></div>
	 	</div>
</body>
</html>

<< CSS 数据类型 - gradient CSS - padding-right >>