移动端禁止页面下拉刷新（页面有滚动区域）

本文链接： https://blog.csdn.net/a1390033590/article/details/102746973

参考：https://www.cnblogs.com/dongcanliang/p/8946495.html

function isscroll(dom,flag) {
  // 页面是否启用不可下拉
  if(flag) {
    document.body.addEventListener('touchmove',function (event) {
      event.returnValue = true;  // 允许页面下拉的属性
    }, { passive: false });
    return;
  }
  let startY
  document.body.addEventListener('touchstart', (e) => {
    startY = e.touches[0].pageY;
  }, { passive: false });

  document.body.addEventListener('touchmove', handler, { passive: false });

  function handler(e) {
      const moveY = e.touches[0].pageY;
      // scrollTop是盒子内容被滚动条卷去的头部的高度
      const top = dom.scrollTop;
      // clientHeight获取页面的可视区宽高
      const ch = dom.clientHeight;
      // scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。
      const sh = dom.scrollHeight;
      if (!isChildTarget(e.target, dom)) {
        e.preventDefault();
        // top === 0 && moveY > startY  页面没有滚动且手指下滑
        // top + ch === sh && moveY < startY  页面可滑动的地方滑动到了最底部且手指上滑
      } else if ((top === 0 && moveY > startY) || (top + ch === sh && moveY < startY)) {
        // alert(1)
        e.preventDefault();
      }
  }
}
function isChildTarget(child, parent, justChild = false) { 
  
  // justChild为true则只判断是否为子元素，若为false则判断是否为本身或者子元素 默认为false
  let parentNode;
  if (justChild) {
    parentNode = child.parentNode;
  } else {
    parentNode = child;
  }
  
  if (child && parent) {
    while (parentNode) {
      if (parent === parentNode) {
        return true;
      }
      parentNode = parentNode.parentNode;
    }
  }
  return false;
}
export default isscroll;

// 不想禁止下拉的页面（有待改进）
   const collapse = document.querySelector('.collapse');
   isscroll(collapse, true)
// 禁止下拉的页面
   const tree = document.querySelector('.tree .ant-spin-container');
   isscroll(tree)

移动端禁止页面下拉刷新（页面有滚动区域）

猜你喜欢