CSS scroll-padding-inline-end 指定 scrollport 的端边在内联维度中的偏移量。
可能的值
- <length-percentage> - 有效的长度或百分比值，定义从滚动端口的相应边缘向内的偏移量。
- <auto> - 从用户代理确定的滚动端口的相应边缘向内偏移。
适用于
所有滚动容器。
语法
scroll-padding-inline-end = auto | <length-percentage>
CSS scroll-padding-inline-end - 长度值
以下示例演示如何使用 scroll-padding-inline-end 属性使用长度值 （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-end: 2em;
}
.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 end;
}
</style>
</head>
<body>
<h3>CSS scroll-padding-inline-end property.</h3>
<p>scroll-padding-inline-end property sets the scroll padding at the end edge of an element 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-end - 百分比值
以下示例演示如何使用 scroll-padding-inline-end 属性使用百分比值 （60%），在内联维度中设置 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-end: 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 end;
}
</style>
</head>
<body>
<h3>CSS scroll-padding-inline-end property.</h3>
<p>scroll-padding-inline-start property sets the scroll padding of end edge of the element 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-end - 自动值
以下示例演示如何使用 scroll-padding-inline-end 属性通过关键字值 （auto） 设置 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-end: 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 end;
}
</style>
</head>
<body>
<h3>CSS scroll-padding-inline-end property.</h3>
<p>scroll-padding-inline-end property sets the scroll padding of the end edge of the element 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>
