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

2019-04-1374次阅读滚动

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。

上一篇: js手机号码正则及替换为星号方法  下一篇: javascript判断一个变量是否是数组类型  

overscroll-behavior: contain阻止滚动链接,滚动不会传播给祖先相关文章