CSS - scroll-margin-inline-start

scroll-margin-inline-start 屬性用於透過在水平維度開始處的滾動捕捉區域建立邊距來幫助將盒子捕捉到捕捉點。

此區域是透過將指定的偏移量新增到修改後的邊框框在滾動容器的座標空間內的矩形邊界框來計算的。

可能的值

<length> - 來自滾動容器對應邊緣的偏移量。

應用於

所有元素

語法

scroll-margin-inline-start = <length>

CSS scroll-margin-inline-start - 基本示例

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

<html>
<head>
<style>
   #demoScroll {
      width: 65%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #333;
      overflow-x: auto; 
      overflow-y: hidden;
      white-space: nowrap; 
   }
   .snap-block {
      width: 100%; 
      height: 90%;
      scroll-snap-align: start;
      scroll-margin-inline-start: 50px;
      border-radius: 10px;
      background-color: #3498db;
      display: inline-block;
   }
   .color-block:nth-child(2n) {
      background-color: #27ae60; 
   }
   .color-block:nth-child(3n) {
      background-color: #f39c12; 
   }
   .color-block:nth-child(4n) {
      background-color: #e74c3c; 
   }
   .color-block:nth-child(5n) {
      background-color: #9b59b6; 
   }
</style>
</head>
<body>
<h3>scroll-margin-inline-start</h3>
<p>Scroll through the horizontally scrollable blocks.</p>
<div id="demoScroll">
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
</div>
</body>
</html>

列印頁面