📌  相关文章
📜  CSS scroll-margin-block-start 属性(1)

📅  最后修改于: 2023-12-03 15:00:05.739000             🧑  作者: Mango

CSS scroll-margin-block-start 属性

CSS scroll-margin-block-start 属性定义一个元素与相邻的滚动容器的最小垂直间距（断点）。

语法
scroll-margin-block-start: auto|length|initial|inherit;
属性值
  • auto：元素与相邻滚动容器的间距由浏览器计算。
  • length：指定元素与相邻滚动容器的垂直间距，单位可以是px，em等。
  • initial：设置属性为默认值；
  • inherit：继承父级元素的属性值。
示例

假设有以下 HTML 代码和 CSS 样式：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 1px solid black;
        max-height: 100px;
        overflow: auto;
        scroll-margin-block-start: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>若不想辜负青春年少与快乐，就得珍惜时间。</p>
      <p>期末考试我坐在了教室最角落的位置，我的眼里没有别的地方。</p>
      <p>只有高兴的心情，爽朗的呼吸，撑满胸膛。</p>
      <p>这课是暂停了吗？似乎不是。庆幸的是我的头脑飞快，已经结结实实地占领了教室的最高分。</p>
      <p>当喉头发出奇怪的声响，我笑了。</p>
      <p>坚持不懈，是走向成功的捷径。</p>
      <p>时间，是一匹不会轻易驯服的脾气暴躁的马儿。鞭策它奋蹄前行，对待它更要及时抓住每一个机遇来把握。</p>
    </div>
  </body>
</html>

以上代码定义了一个 div 元素，它的 scroll-margin-block-start 值为 50px。预览页面，当滚动到一个段落离相邻的滚动容器小于或等于 50px 时，它将距离容器的开始边界 50px。

兼容性

scroll-margin-block-start 属性在以下浏览器中得到支持：

  • Chrome 66+
  • Edge 79+
  • Firefox 75+
  • Opera 53+
  • Safari 14+

在其他浏览器预计也会得到支持。