CSS - scroll-padding-block 属性

CSS scroll-padding-block 是一个简写属性，指定块维度中元素的滚动填充。

可能的值

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

适用于

所有 scroll 容器的 scrollport。

语法


scroll-padding-block = [ auto | <length-percentage> ]{1,2}

CSS scroll-padding-block - 长度值

以下示例演示如何使用 scroll-padding-block 属性使用长度值（30px）设置 div 元素在块维度中的滚动填充填充。


<html>
<head>
<style>
	 #container {
	 	 	 width: 50%;
	 	 	 aspect-ratio: 3/1;
	 	 	 padding: 40px 0;
	 	 	 border: solid black 2px;
	 	 	 overflow-x: hidden;
	 	 	 overflow-y: scroll;
	 	 	 scroll-snap-type: y mandatory;
	 	 	 scroll-padding-block: 30px;
	 }

	 .boxA {
	 	 	 background-color: rgb(234, 234, 128);
	 	 	 width: 85%;
	 	 	 aspect-ratio: 3/1;
	 }

	 .boxB {
	 	 	 background-color: lightgreen;
	 	 	 width: 70%;
	 	 	 aspect-ratio: 4/1;
	 }

	 .boxA, .boxB {
	 	 	 margin: 2px;
	 	 	 scroll-snap-align: start none;
	 }
</style>
</head>
<body>
	 	<h3>CSS scroll-padding-block property.</h3>
	 	<p>Scroll-padding-block property sets the scroll padding of an element in the block 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-block - 百分比值

以下示例演示如何使用 scroll-padding-block 属性使用百分比值（60%），在块维度中设置 div 元素的滚动填充填充。


<html>
<head>
<style>
	 #container {
	 	 	 width: 50%;
	 	 	 aspect-ratio: 3/1;
	 	 	 padding: 40px 0;
	 	 	 border: solid black 2px;
	 	 	 overflow-x: hidden;
	 	 	 overflow-y: scroll;
	 	 	 scroll-snap-type: y mandatory;
	 	 	 scroll-padding-block: 60%;
	 }

	 .boxA {
	 	 	 background-color: rgb(234, 234, 128);
	 	 	 width: 85%;
	 	 	 aspect-ratio: 3/1;
	 }

	 .boxB {
	 	 	 background-color: lightgreen;
	 	 	 width: 70%;
	 	 	 aspect-ratio: 4/1;
	 }

	 .boxA, .boxB {
	 	 	 margin: 2px;
	 	 	 scroll-snap-align: start none;
	 }
</style>
</head>
<body>
	 	<h3>CSS scroll-padding-block property.</h3>
	 	<p>Scroll-padding-block property sets the scroll padding of an element in the block dimension. Here the value is a percentage value (60%).</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-block - 自动值

以下示例演示如何使用 scroll-padding-block 属性通过关键字值（auto）设置 div 元素在块维度中的滚动填充填充。


<html>
<head>
<style>
	 #container {
	 	 	 width: 50%;
	 	 	 aspect-ratio: 3/1;
	 	 	 padding: 40px 0;
	 	 	 border: solid black 2px;
	 	 	 overflow-x: hidden;
	 	 	 overflow-y: scroll;
	 	 	 scroll-snap-type: y mandatory;
	 	 	 scroll-padding-block: auto;
	 }

	 .boxA {
	 	 	 background-color: rgb(234, 234, 128);
	 	 	 width: 85%;
	 	 	 aspect-ratio: 3/1;
	 }

	 .boxB {
	 	 	 background-color: lightgreen;
	 	 	 width: 70%;
	 	 	 aspect-ratio: 4/1;
	 }

	 .boxA, .boxB {
	 	 	 margin: 2px;
	 	 	 scroll-snap-align: start none;
	 }
</style>
</head>
<body>
	 	<h3>CSS scroll-padding-block property.</h3>
	 	<p>Scroll-padding-block property sets the scroll padding of an element in the block dimension. Here the value given is auto.</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-block - 相关属性

以下是与 scroll-padding-block 属性关联的 CSS 属性列表：

属性	描述
scroll-padding-block-start	在 scrollport 的块维度中设置起始边的偏移量。
scroll-padding-block-end	在 scrollport 的块维度中设置端边的偏移量。

打印本页