overscroll-behavior:contain设置子元素

最近看张鑫旭大神的博客，学习到了很多的新东西，尤其是css，很多以前需要费劲巴拉的写js能搞定的东西，现在一两行css就搞定了

比如说一个常见的场景，有一个浮层，这个浮层可以滚动，但是呢，这个滚动的时候，或者滚动到底部的时候不能影响其他元素也滚动

在比如说一个场景，子元素滚动到底部的时候，需要加载新的数据或者别的操作，不能让别的元素也跟着滚动

上面的这两个场景就可以用到今天要说的cssoverscroll-behavior:contain;

举个例子：
html

<div class="box">
    <div class="son">
      sdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjf
    </div>
    sdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjf
 </div>

css

.box{
  height:100px;
  overflow:auto;
  width:150px;
  border:1px solid red;
  word-break: break-all;
}
.son{
  border:1px solid #000;
  margin:20px;
  height:100px;
  overflow:auto;
  overscroll-behavior:contain;
}

参考的文章https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/,请狠狠的点击我