CSS - scroll-padding-inline-end

CSS scroll-padding-inline-end 指定了視口在內聯方向上的末端邊緣的偏移量。

可能的值

<length-percentage> − 有效的長度或百分比值，定義了相對於視口對應邊緣的內側偏移量。
<auto> − 由使用者代理確定的相對於視口對應邊緣的內側偏移量。

應用於

所有滾動容器。

語法

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

CSS scroll-padding-inline-end - 長度值

以下示例演示瞭如何使用 scroll-padding-inline-end 屬性設定視口在內聯方向上的末端邊緣的偏移量，使用長度值 (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-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 屬性設定 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-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 - auto 值

以下示例演示瞭如何使用 scroll-padding-inline-end 屬性設定 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-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>

列印頁面