📌  相关文章
📜  CSS | overscroll-behavior 属性(1)

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

CSS | overscroll-behavior 属性

CSS 的 overscroll-behavior 属性用于控制当内容滚动到边缘时，窗口的滚动行为。它可以应用于容器元素，例如 div， section 等等。

基本语法
selector {
  overscroll-behavior: auto | contain | none;
}

  • auto：默认值。让页面上的元素按照正常的方式滚动。当内容滚动到边缘时，滚动事件会向上/下传递。我们可以看到浏览器的滚动条在这种情况下滚动。

  • contain：阻止页面上的元素自动滚动到浏览器的外部边缘。它并不影响前景和背景元素之间的滚动。如果前景或背景元素触及边缘，窗口会停止滚动。该值可防止下一级滚动外滑，从而恢复原始内容的滚动。

  • none：完全禁止页面上的元素滚动。当内容滚动到边缘时，窗口停止滚动。

例子

我们可以用以下代码片段来对 overscroll-behavior 的三个值进行演示。

<style>
  body {
    height: 100vh;
  }
  
  .container {
    height: 50vh;
    overflow: auto;
    border: 1px solid black;
  }
  
  .content {
    height: 200vh;
    background-color: yellowgreen;
  }
  
  .separator {
    height: 50vh;
    background-color: gray;
  }
  
  .box {
    background-color: skyblue;
    height: 20vh;
    margin-bottom: 20px;
  }
  
  /* 以下是 overscroll-behavior 示例 */
  
  .auto-scroll {
    overscroll-behavior: auto;
  }
  
  .contain-scroll {
    overscroll-behavior: contain;
  }
  
  .no-scroll {
    overscroll-behavior: none;
  }
</style>

<body>
  <div class="container auto-scroll">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
  
  <div class="separator"></div>
  
  <div class="container contain-scroll">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
  
  <div class="separator"></div>
  
  <div class="container no-scroll">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
</body>

在上面这个例子中，我们先设置了一个 .container 容器，它包含了内容超出容器界限的 .content 元素。我们在容器上应用了三种 overscroll-behavior 属性：

  • auto-scroll：按照默认的浏览器滚动方式滚动。
  • contain-scroll：在滚动到边缘时，只防止下一级滚动外滑。
  • no-scroll：完全禁止滚动。

在这个例子中，我们还添加了 .separator 元素，它只是用来分隔上面三个示例。我们还添加了 .box 元素，这是一些可以轻松滑动的元素。你可以自行添加或删除 .box，来看看它们如何影响滚动行为。

总结

overscroll-behavior 对于控制浏览器或者其他容器的滚动行为非常有用。通过它，我们可以获得更好的控制权来滚动我们的页面。