overscroll-behavior: contain阻止滚动链接，滚动不会传播给祖先

overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

overscroll-behavior: contain | auto | none;
overscroll-behavior-x: contain | auto | none;
overscroll-behavior-y: contain | auto | none;

• auto - 默认。元素的滚动会传播给祖先元素。
• contain - 阻止滚动链接，滚动不会传播给祖先。
• none - 和 contain 效果一样

阻止 fixed 定位元素的滚动传播

当一个 fixed 定位元素滚动到边界时，会滚动元素后面的内容。如下：

我们可以使用 overscroll-behavior: contain 阻止这种行为。

如果我们有一个 fixed 定位的弹出层需要滚动时，默认是这样的，如下：

使用 overscroll-behavior: contain 可以阻止滚动传播给父元素，如下：

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果，只需要在 body 或 html 元素添加：

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

当我们阻止了原生的下拉刷新后，就可以实现自己定义的下拉刷新。否则会出现两个下拉刷新：

之前：

之后：

禁用炫光和回弹效果

将属性制定为 none，可以禁用默认的滚动边界效果。

body {
  /* 禁用默认的下拉刷新和边界效果
     但是依然可以进行滑动导航 */
  overscroll-behavior-y: none;
}

之前:

之后：

如果想禁用左右滑动的手势导航，可以使用 overscroll-behavior-x: none。