CSS - scroll-padding-block-end

CSS scroll-padding-block-end 指定元素在块维度上滚动填充的结束边缘的偏移量。

可能的值

<length-percentage> − 有效的长度或百分比值，定义从视口相应边缘向内的偏移量。

<auto> − 由用户代理确定的从视口相应边缘向内的偏移量。

应用于

所有滚动容器。

语法

scroll-padding-block-end =  auto | <length-percentage>

CSS scroll-padding-block-end - length 值

以下示例演示如何使用scroll-padding-block-end 属性来设置 div 元素在块维度上滚动填充结束边缘的偏移量，使用长度值 (30px)。

<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-end: 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-end property.</h3>
   <p>scroll-padding-block-end property sets the offset for the end edge of the scrollport 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-end - 百分比值

以下示例演示如何使用scroll-padding-block-end 属性来设置 div 元素在块维度上滚动填充结束边缘的偏移量，使用百分比值 (60%)。

<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-end: 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-end property.</h3>
   <p>scroll-padding-block-end property sets the offset for the end edge of the scrollport 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-end - auto 值

以下示例演示如何使用scroll-padding-block-end 属性来设置 div 元素在块维度上滚动填充结束边缘的偏移量，使用关键字值 (auto)。

<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-end: 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-end property.</h3>
   <p>scroll-padding-block-end property sets the offset for the end edge of the scrollport 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>

打印页面