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;
}

 

出处：如何阻止 MacOS 的触底弹性滚动和双指手势导航