CSS - scroll-padding-block

CSS scroll-padding-block 是一個簡寫屬性，它指定元素在塊維度上的滾動填充。

可能的值

<length-percentage> − 一個有效的長度或百分比值，定義了從視口相應邊緣向內的偏移量。

<auto> − 由使用者代理確定的從視口相應邊緣向內的偏移量。

應用於

所有滾動容器的視口。

語法

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

CSS scroll-padding-block - length 值

下面的例子演示瞭如何使用scroll-padding-block屬性來設定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: 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屬性來設定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: 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 - 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 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	設定視口塊維度起始邊緣的偏移量。
scroll-padding-block-end	設定視口塊維度結束邊緣的偏移量。

列印頁面