CSS 属性

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

属性值

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

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

适用范围

所有滚动容器。

语法

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

CSS scroll-padding-inline 长度值

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

<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: 20px;
   }

   .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 start;
   }
</style>
</head>
<body>
   <h3>CSS scroll-padding-inline property.</h3>
   <p>Scroll-padding-inline 属性设置内联维度中元素的滚动填充。</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 百分比值

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

<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: 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 start;
   }
</style>
</head>
<body>
   <h3>CSS scroll-padding-inline property.</h3>
   <p>Scroll-padding-inline 属性设置内联维度中元素的滚动填充。</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:auto

以下示例演示如何使用滚动填充内联属性来设置内联维度中 div 元素的滚动填充，使用关键字值 (auto)。

<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: 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 start;
   }
</style>
</head>
<body>
   <h3>CSS scroll-padding-inline property.</h3>
   <p>Scroll-padding-inline 属性设置内联维度中元素的滚动填充。</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: 相关属性

以下是 CSS 属性列表与scroll-padding-inline属性关联:

属性描述
scroll-padding-inline-start设置滚动端口内联尺寸中起始边缘的偏移量。
scroll-padding-inline-end设置滚动端口内联尺寸中结束边缘的偏移量。