CSS overscroll-behavior让滚动只自己触发

hello, 滚动了，你看见我了哦！

在书写web页面时，我们经常会有遇到滚动嵌套。

例如下图所示，是我们写的一个滚动嵌套的截图：

在默认情况下，里面的滚动条滚动到底部边缘后，我们在继续滚动的时候，父级滚动条会继续跟着滚动。
视频示意如下：

但是，有时候我们可能希望里面的滚动条滚动到底部之后，再继续滚动时不出现这种现象，这样可以方便我们实现一些其他交互，例如滚动到底部继续Loading加载。

那么我们今天要学习的CSS overscroll-behavior 属性便能解决我们的需求。

overscroll-behavior属性简介

CSS overscroll-behavior属性可以设置DOM元素滚动到边缘时候的行为。

语法
:::info overscroll-behavior: [ contain | none | auto ]{1,2} :::

支持1~2个值，因此，下面写法都是OK的：

/* 单个关键字值 */
overscroll-behavior: auto;     /* 默认值 */
overscroll-behavior: contain;
overscroll-behavior: none;
/* 两个值，分别表示x方向和y方向 */
overscroll-behavior: auto contain;

auto
默认值。就是我们默认看到的滚动行为表现，滚动到边缘后继续滚动外部的可滚动容器。
contain
默认的滚动溢出行为只会表现在当前元素的内部（例如“反弹”效果或刷新），不会对相邻的滚动区域进行滚动。例如创建了一个浮层，浮层滚动（带弹性效果），但是底层元素不会滚动。
none
相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为。

contain和none的行为差异体现主要在移动端。

兼容性如下：

demo代码如下：

.father-scroll {
  width: 380px;
  height: 400px;
  padding: 20px;
  background: yellow;
  border-radius: 4px;
  overflow-y: auto;
}
.son-scroll {
  width: 340px;
  height: 400px;
  margin: 20px;
  background: aliceblue;
  border-radius: 4;
  overflow-y: auto;
  overscroll-behavior: contain;
}

<div class="father-scroll">
  <h1>父级</h1>
  <div class="son-scroll">
    <h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1><h1>子级</h1>
  </div>
  <h1>hellow,滚动了，你看见我了哦！</h1>
</div>

其他相关语法

和CSS overflow属性类似，CSS overscroll-behavior也支持分解为overscroll-behavior-x和overscroll-behavior-y两个独立CSS属性，分别表示水平滚动和垂直滚动的边界行为。
语法和CSS overscroll-behavior类似，这里不进一步展开。

目前CSS overscroll-behavior在PC项目中利用价值反而更大一些，因为在移动端Safari浏览器是个大头。