overscroll-behavior 滚动控制
作用
overscroll-behavior: contain; contain表示保留默认的边界行为,阻止父容器滚动
overscroll-behavior: none; none表示边界行为和父容器滚动,两者都阻止
可解决问题
1. macOS 的滚动容器中默认会有一个“触底反弹”效果,也就是常说的“橡皮筋”效果
body{ overscroll-behavior: none; }
2. 在macOS中,还有一个系统级别的导航手势
在页面之间横扫,就是那个,烦人的在双指左滑右滑时候出现的箭头图标,容易误切换页面
body{ overscroll-behavior: none; }
3. 保留弹性滚动,只阻止手势导航,可以设置:
body{ overscroll-behavior: contain; }
4. 防止滚动穿透
.modal{ overscroll-behavior: contain; }