「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
前言
今天可真快乐，在家打了一天的扑克（这比我上一天班都累哈哈哈），但是学习不能停。今天研究了一下当滚动发生嵌套时怎么避免内外层互相影响。
背景
在默认的情况下，内部的滚动条滚动到底部边缘时再继续滚动的时候，外面容器的滚动条会跟着继续滚动。但是这和我们期望的有时候可能不太相匹配，例如下拉列表框，当滚动条滚动到它的底部时如果外部容器的滚动条还继续滚动，那这个列表可能就滚动走了，这对用户体验很不好。那这个时候要怎么做呢？
overscroll-behavior属性
overscroll-behavior属性可以设置DOM元素滚动到边缘的行为。它的语法如下：
overscroll-behavior:[contain | none | auto]{1,2}
它可以支持1-2个值，所以下面这种写法也是可以的：
overscroll-behavior: contain;
overscroll-behavior: none ;
overscroll-behavior: auto;/* 默认值*/
overscroll-behavior: auto contain;/*两个值，分别表示x方向和y方向*/
这三个值的意义：
- auto 默认值，表现为我们默认看到的滚动行为，即滚动条滚动到边缘后继续滚动外部的可滚动容器。
- contain 默认滚动溢出行为只会表现在当前元素的内部，不会对相邻的滚动区域进行滚动。
- none 相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为。
总结
也就是说，当我们想要内外层滚动不互相影响，只需要在CSS代码中加入上面的一行即可，整个过程不需要JavaScript代码的参与。由于overscroll-behavior本身是属于体验增强的CSS属性，因此可以在实际项目中大胆使用，即使是浏览器不支持也只不过是保持现有模样而已。
