美文网首页
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