CSS - scroll-margin-block-end

属性 `scroll-margin-block-end` 用于定义块轴末端（在从左到右的语言中通常为底部）的滚动捕捉区域的边距。它指定了捕捉区域底部边缘与其滚动容器框之间的边距。

此区域通过获取已修改的边框框，在其滚动容器的坐标系内找到其矩形边界框，然后添加给定的偏移量来计算。

可能的值

<length> - 来自滚动容器块末端边缘的偏移量。

应用于

所有元素

语法

scroll-margin-block-end = <length>

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

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

<html>
<head>
<style>
   #demoScroll {
      width: 70%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #333;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .snap-block {
      width: 90%;
      aspect-ratio: 16/9;
      scroll-snap-align: start none;
      scroll-margin-block-end: 50px; 
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
   }
   .blue { background-color: #3498db; }
   .green { background-color: #27ae60; }
   .yellow { background-color: #f39c12; }
   .red { background-color: #e74c3c; }
   .purple { background-color: #9b59b6; }
</style>
</head>
<body>
<h3>scroll-margin-block-end</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 class="snap-block purple"></div>
</div>
</body>
</html>

打印页面