使用overscroll-behavior来防止目标区域的滚动触发父元素的滚动,在支持的操作系统中,当滚动到容器的末端时,保留” 反弹” 效果。
语法
属性
- overscroll-behavior
- overscroll-behavior-x
- overscroll-behavior-y
值
使用两个关键字来指定overscroll-behavior分别在x和y轴的值。只用一个值的话,x和y轴都被指定为该值。
- auto 默认效果
- contain 设置这个值后,默认的滚动边界行为不变(“触底” 效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。
- none 临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。
语法形式
plain text
[ contain | none | auto ]{1,2}
禁用下拉刷新 pull-to-refresh
禁用原生的下拉刷新效果,只需要在 body 或 html 元素添加:
css
body {
overscroll-behavior-y: contain;
}
禁用炫光和回弹效果
将属性设为 none,可以禁用默认的滚动边界效果。
css
body {
overscroll-behavior-y: none;
}
禁用左右滑动的手势导航
css
body {
overscroll-behavior-x: none;
}