CSS 属性

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

属性值

  • <length-percentage>: 有效的长度或百分比值，定义距滚动端口相应边缘的向内偏移。

    <auto>: 由用户代理确定的距滚动端口相应边缘的向内偏移。

适用范围

所有滚动容器的滚动端口。

语法

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

CSS scroll-padding-block: 长度值

下面的例子演示了如何使用scroll-padding-block属性来设置div元素的滚动padding在块维度中的padding，使用的是长度值(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: 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 属性设置块维度中元素的滚动填充。</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属性来设置div的滚动padding的padding块维度中的元素，使用百分比值（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: 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 属性设置块维度中元素的滚动填充。 这里的值为百分比值 (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: auto 

以下示例演示如何使用scroll-padding -block 属性设置块维度中 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: 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 属性设置块维度中元素的滚动填充。 这里给定的值为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设置起始边缘的偏移量滚动端口的块尺寸。
scroll-padding-block-end 设置滚动端口块尺寸中结束边缘的偏移量。