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