关于react.js:H5阻止IOS端橡皮筋效果

39次阅读

共计 752 个字符，预计需要花费 2 分钟才能阅读完成。

我这边是查阅材料，写了个 JS 版的函数：

  IOS_STOP_preventDefault() {
    let startY, endY;
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    const scrollHeight =
      document.documentElement.scrollHeight || document.body.scrollHeight;
    document.addEventListener(
      'touchstart',
      function (e) {startY = e.touches[0].pageY;
      },
      {passive: false}
    );
    document.addEventListener(
      'touchmove',
      function (e) {endY = e.touches[0].pageY; // 记录手指触摸的挪动中的坐标
        // 手指下滑，页面达到顶端不能持续下滑
        if (endY > startY && scrollTop <= 0) {e.preventDefault();
        }
        // 手指上滑，页面达到底部不能持续上滑
        if (endY < startY && scrollTop + clientHeight >= scrollHeight) {e.preventDefault();
        }
      },
      {passive: false}
    );
  }

当咱们判断以后环境是 IOS 环境时，在 onload/onready/ 或各种框架生命周期里调用即可
原链接 https://www.cnblogs.com/cuncu…

正文完