美文网首页
ios 禁止顶部橡皮筋效果

ios 禁止顶部橡皮筋效果

作者: McDu | 来源:发表于2019-08-25 17:38 被阅读0次

参考文章:移动端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});
}

相关文章

网友评论

      本文标题:ios 禁止顶部橡皮筋效果

      本文链接:https://www.haomeiwen.com/subject/vlhkectx.html