使用overscroll-behavior来防止目标区域的滚动触发父元素的滚动,在支持的操作系统中,当滚动到容器的末端时,保留”反弹”效果。

语法

属性

 • overscroll-behavior

 • overscroll-behavior-x

 • overscroll-behavior-y

值

使用两个关键字来指定overscroll-behavior分别在x和y轴的值。只用一个值的话,x和y轴都被指定为该值。

 • auto 默认效果

 • contain 设置这个值后,默认的滚动边界行为不变(“触底”效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。

 • none 临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。

语法形式

[ contain | none | auto ]{1,2}

禁用下拉刷新 pull-to-refresh

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

body {
    overscroll-behavior-y: contain;
}

禁用炫光和回弹效果

将属性设为 none,可以禁用默认的滚动边界效果。

body {
    overscroll-behavior-y: none;
}

禁用左右滑动的手势导航

body {
    overscroll-behavior-x: none;
}

MDN:overscroll-behavior