CSS - overscroll-behavior-y 属性

CSS 属性 overscroll-behavior-y 确定当滚动区域的垂直边界到达时，浏览器会执行什么操作。

您可以参考 overscroll-behavior 以获取详细信息。

可能的值

CSS 属性 overscroll-behavior-y 定义为以下关键字之一。

auto − 默认的滚动行为是正常的。
contain − 滚动行为仅在设置该值的元素中可见。相邻元素上没有设置滚动。
none − 没有看到滚动链接行为。避免了默认的滚动溢出行为。

应用于

所有非替换块级元素和非替换内联块级元素。

语法

overscroll-behavior-y = contain | auto | none

CSS overscroll-behavior-y - contain 值

以下示例演示了 overscroll-behavior-y: contain 的用法，它将垂直滚动效果设置为包含且不连续。

<html>
<head>
<style>
   main {
      height: 1500px;
      width: 100%;
      background-color: slateblue;
   }

   main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-y: contain;
   }

   div > div {
      height: 500px;
      width: 100%;
      background-color: lightblue;
   }

   p {
      padding: 10px;
      background-color: rgba(0, 0, 150, 0.2);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10%;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-y Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-y</b> defines the vertical scrolling area behavior.
         The value contain prevents the parent element getting scrolled. Thus preventing the 
         scrolling chain experience.
         </p>
      </div>
      </div>
   </main>
</body>
</html>

CSS overscroll-behavior-y - auto 值

以下示例演示了 overscroll-behavior-y: auto 的用法，它将滚动效果设置为默认值，其中浏览器在到达应用元素的垂直边界时决定是否滚动父元素。

<html>
<head>
<style>
   main {
      height: 1500px;
      width: 100%;
      background-color: slateblue;
   }

   main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-y: auto;
   }

   div > div {
      height: 500px;
      width: 100%;
      background-color: lightblue;
   }

   p {
      padding: 10px;
      background-color: rgba(0, 0, 150, 0.2);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10%;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-y Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-y: auto</b> defines the vertical scrolling area behavior.
         The value auto behaves like the normal scrolling behavior. It is the default value.
         </p>
      </div>
      </div>
   </main>
</body>
</html>

打印页面