CSS 属性

内联（水平轴）维度中元素的滚动边距由CSS的scroll-margin-inline速记属性设置。

为了更容易将此框捕捉到捕捉端口，滚动边距值指定定义滚动捕捉区域的开始。

该区域是通过获取已修改的边框框、找到其矩形边框（与坐标空间对齐）来计算的滚动容器的，并添加所需的开始。

属性值

<length>: 一个从滚动容器的相应边缘开始。

组成属性

此属性是以下 CSS 属性的简写:

适用范围

所有元素

语法

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

CSS scroll-margin-inline: 基本示例

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

<html>
<head>
<style>
   #demoScroll {
      width: 90%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #333;
      overflow-x: auto; 
      overflow-y: hidden;
      white-space: nowrap; 
   }
   .snap-block {
      width: 99%;
      height: 90%;
      scroll-snap-align: start;
      scroll-margin-inline: 5px; 
      border-radius: 10px;
      background-color: #3498db;
      display: inline-block;
      margin-right: 20px; 
   }
   .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</h3>
<p>滚动内联可滚动块。</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>