参考文章:移动端iOS阻止橡皮筋效果
给 body 加 event.preventDefault();
会导致页面不能滚动,所以解决办法是当页面达到临界值时禁止滚动。
const ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否为ios
if (ios) {
// 去除 iOS 顶部橡皮筋效果
let startY, endY;
document.body.addEventListener('touchstart', function(e) {
startY = e.touches[0].pageY;
});
document.body.addEventListener('touchmove', function(e) {
endY = e.touches[0].pageY;
// 手指下滑,页面到达顶端不能继续下滑
if (endY > startY && document.body.scrollTop <= 0) {
e.preventDefault();
}
}, {passive: false});
}
网友评论