技巧杂烩

overscroll-behavior

前端CSS

overscroll-behavior

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

语法

属性

 • overscroll-behavior

 • overscroll-behavior-x

 • overscroll-behavior-y

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

 • 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

文章标题:overscroll-behavior

文章作者:浅小沫

文章链接:https://blog.truimo.com/posts/css-overscroll-behavior


您可以自由在任何媒介以任何形式分享本作品,但需署名,且不得用于商业目的或改编。若分发衍生作品,须采用相同的许可协议。

本博客的所有原创内容采用 CC BY-NC-ND 4.0 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。