CSS - scroll-margin-塊

CSS 屬性 scroll-margin-block 是一個簡寫屬性，用於控制塊軸（在大多數情況下為垂直軸）上滾動捕捉區域的邊距。它定義了捕捉區域的捕捉區域邊緣與其滾動容器框之間的邊距。

可能的值

<length> - 從滾動容器的相應邊緣開始的偏移量。

組成屬性

此屬性是以下 CSS 屬性的簡寫

應用於

所有元素

語法

scroll-margin-block = <length>{1,2}

CSS scroll-margin-block - 基本示例

以下示例演示了 scroll-margin-block 屬性的用法。

<html>
<head>
<style>
   #demoScroll {
      width: 75%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #ddd;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .snap-block {
      width: 80%; 
      aspect-ratio: 4/3; 
      scroll-snap-align: start none;
      scroll-margin-block: 40px;
   }
   .blue { background-color: #3498db; }
   .green { background-color: #2ecc71; }
   .yellow { background-color: #f1c40f; }
   .red { background-color: #e74c3c; }
</style>
</head>
<body>
<h3>scroll-margin-block</h3>
<p>Scroll through the colorful blocks.</p>
<div id="demoScroll">
   <div class="snap-block blue"></div>
   <div class="snap-block green"></div>
   <div class="snap-block yellow"></div>
   <div class="snap-block red"></div>
</div>
</body>
</html>

列印頁面