CSS 属性

CSS 滚动边距属性

CSS scroll-margin是一个简写属性，它定义捕捉区域内元素的边距。

滚动捕捉区域是以下区域:当用户滚动时元素将捕捉到的滚动容器。

属性值

  • <length>: 从相应边缘的开始滚动容器。长度值是一个数值，例如 px、em。

适用范围

所有 HTML 元素。

DOM 语法

object.style.scrollMargin = "length";

下图演示了滚动边距结构供参考:

CSS scroll-margin

CSS scroll-margin: 零值

以下示例演示如何通过将滚动边距属性设置为 0 来删除滚动部分周围的空间 -

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 300px;
      height: 200px;
      scroll-snap-align: start;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
      scroll-margin: 0;
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
      scroll-margin: 0;
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
      scroll-margin: 0;
   }
</style>
</head>
<body>
   <h3>使用滚动条箭头滚动内容以查看效果。</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-margin: 0</div>
      <div class="scrolling-section2">scroll-margin: 0</div>
      <div class="scrolling-section3">scroll-margin: 0</div>
   </div>
</body>
</html>

CSS scroll-margin- 长度值

以下示例演示如何使用 CSS 滚动边距属性。当你滚动内容时，你会注意到元素之间的间距发生了变化 -

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 300px;
      height: 200px;
      scroll-snap-align: start;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
      scroll-margin: 20px;
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
      scroll-margin: 2em;
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
      scroll-margin: 10px;
   }
</style>
</head>
<body>
   <h3>使用滚动条箭头滚动内容以查看效果。</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-margin: 20px</div>
      <div class="scrolling-section2">scroll-margin: 2em</div>
      <div class="scrolling-section3">scroll-margin: 10px</div>
   </div>
</body>
</html>

CSS scroll-margin: 相关属性

以下是滚动边距的 CSS 属性列表:

属性值
scroll-margin-top设置元素滚动捕捉区域的上边距。
scroll-margin-bottom设置元素滚动捕捉区域的下边距。
scroll-margin-left设置元素滚动捕捉区域的左边距.
scroll-margin-right设置元素滚动捕捉区域的右边距。
scroll-margin-block指定元素垂直滚动的边距。
scroll-margin-inline指定内联维度中元素的滚动边距。