CSS - scroll-margin-inline-end

屬性 `scroll-margin-inline-end` 透過定義水平方向末端滾動捕捉區域的邊距來幫助此盒子捕捉到捕捉點。

要獲取此區域，請獲取修改後的邊框盒子，在其滾動容器的座標系中找到其矩形邊界框，然後新增所需的偏移量。

可能的值

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

應用於

所有元素

語法

scroll-margin-inline-end = <length>

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

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

<html>
<head>
<style>
#demoScroll {
   width: 60%;
   aspect-ratio: 16/9;
   padding: 20px;
   margin: auto;
   border: solid 3px #333;
   overflow-x: auto; 
   overflow-y: hidden;
   white-space: nowrap;
}
.snap-block {
   width: 104%; 
   height: 90%;
   scroll-snap-align: start;
   scroll-margin-inline-end: 150px; 
   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-end</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>

列印頁面