CSS - scroll-padding 屬性

CSS 的 scroll-padding 屬性指定了滾動容器邊緣與元素捕捉到位的區域之間的空間量，當用戶停止滾動時。

scroll-padding 屬性是以下 CSS 屬性的簡寫

可能的值

<length-percentage> − 使用有效的 <length> 或 <percentage>，表示從視口邊緣向內的偏移量。
auto − 偏移量通常由使用者代理設定為 0px，如果非零值更合適，則允許檢測並採取其他措施。

應用於

所有滾動容器。

DOM 語法

object.style.scrollPadding = "<length-percentage> | auto";

scroll-padding-* 屬性設定視口中最佳檢視區域的偏移量。它們有助於排除被其他內容（例如固定定位的工具欄或側邊欄）隱藏的視口區域，或在目標元素與視口邊緣之間建立空間

下圖演示了滾動填充結構以供參考

CSS scroll-padding - 零值

以下示例演示瞭如何使用 scroll-padding 屬性來移除任何指定的滾動填充 -

<html>
<head>
<style>
   .scroll-container {
      width: 350px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 350px;
      height: 200px;
      scroll-snap-align: start;
      scroll-padding: 0;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
   }
</style>
</head>
<body>
   <h3>Scroll the content using the scrollbar arrows to see the effect.</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-padding: 0</div>
      <div class="scrolling-section2">scroll-padding: 0</div>
      <div class="scrolling-section3">scroll-padding: 0</div>
   </div>
</body>
</html>

CSS scroll-padding - <length> 值

以下示例演示瞭如何使用 scroll-padding: 25px 屬性在可滾動內容周圍新增 25px 的填充 -

<html>
<head>
<style>
   .scroll-container {
      width: 350px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-padding: 25px;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 350px;
      height: 200px;
      scroll-snap-align: start;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
   }
</style>
</head>
<body>
   <h3>Scroll the content using the scrollbar arrows to see the effect.</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-padding: 25px</div>
      <div class="scrolling-section2">scroll-padding: 25px</div>
      <div class="scrolling-section3">scroll-padding: 25px</div>
   </div>
</body>
</html>

CSS scroll-padding - <percentage> 值

以下示例演示了 scroll-padding: 20% 屬性如何向滾動容器的頂部和底部新增 20% 的填充，這會影響滾動行為 -

<html>
<head>
<style>
   .scroll-container {
      width: 350px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-padding: 20%;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 350px;
      height: 200px;
      scroll-snap-align: start;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
   }
</style>
</head>
<body>
   <h3>Scroll the content using the scrollbar arrows to see the effect.</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-padding: 20%</div>
      <div class="scrolling-section2">scroll-padding: 20%</div>
      <div class="scrolling-section3">scroll-padding: 20%</div>
   </div>
</body>
</html>

CSS scroll-padding - 相關屬性

以下是 scroll-padding 的 CSS 屬性列表

屬性	值
scroll-padding-top	設定元素滾動捕捉區域的頂部偏移量。
scroll-padding-bottom	設定元素滾動捕捉區域的底部偏移量。
scroll-padding-left	設定元素滾動捕捉區域的左側偏移量。
scroll-padding-right	設定元素滾動捕捉區域的右側偏移量。
scroll-padding-block	指定元素在塊維度上的滾動填充。
scroll-padding-inline	指定元素在內聯維度上的滾動填充。

列印頁面