ios中禁用回弹效果

1.js设置body的高度为视口高度，

2.设置内滚动容器 #scrollBox

 1 #scrollBox{
 2     overflow-x:hidden;
 3     overflow-y: auto;
 4     -webkit-overflow-scrolling : touch;
 5 }
 6 
 7 body,html{
 8     overflow: hidden;
 9     position: fixed;
10     top: 0;
11     bottom: 0;
12     left: 0;
13     right: 0;
14 }

许多页面的写法是

document.body.addEventListener('touchmove',(e:any)=>{
     e.preventdefault();
})

结果发现，本该滚动的内容器#scrollBox偶现无法滚动，经过测试，猜想如下

虽然我们通过定位强行让body和html不动了，但是在下拉上拉的时候，浏览器的默认行为还是在。

偶现的#scrollBox无法滚动是因为此时body还没有滚完。所以此时我们强行让它回弹。

document.body.addEventListener('touchmove',(e:any)=>{
    document.body.scrollTop = 0;
})

 

posted @ 2021-07-02 16:13  方小川  阅读(1878)  评论(0)  编辑  收藏  举报