以前老到遇滚动嵌套时，子组件滚动到最底部(过渡滚动--滚动到边界)时会触发父组件滚动。今天看到可以用overscroll-behavior来让让父组件不触发滚动。
先看一下对比效果：
without overscroll-behavior
with overscroll-behavior
overscroll-behavior属性
/* Keyword values */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;
/* Two values */
overscroll-behavior: auto contain;
/* Global values */
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: unset;
默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果。
| 初始值 | auto |
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Syntax
overscroll-behavior 属性可以使用下面列表中的一或两个关键字指定。
使用两个关键字来指定 overscroll-behavior 分别在 x 和 y 轴的值。只用一个值的话，x 和 y 轴都被指定为该值。
值
auto
默认效果contain
设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。none
临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。
Formal syntax
[ contain | none | auto ]{1,2}
兼容性
can I use - overscroll-behavior
例子🌰
// css
#scroll {
display: block;
height: 50px;
overscroll-behavior-y: contain;
-ms-scroll-chaining: contain;
}
