ios 中fixed布局的页头和叶尾会被上拉和下拉覆盖

ios 中fixed布局的页头和叶尾会被上拉和下拉覆盖

dealScroll.js

/**
 * 是否根
 * @param {dom} obj
 */
function isDocument(obj) {
  return obj != null && obj.nodeType == obj.DOCUMENT_NODE;
}

/**
 * 处理touch事件
 * @param {event} e 事件对象
 */
const eventTouch = function (e) {
  //触摸节点
  let el = e.target;
  //存在滚动区域
  let scrollDom = false;
  while (!isDocument(el)) {
    if (el.getAttribute('autoScroll')) {
      scrollDom = true;
    }
    el = el.parentNode;
  }
  if (!scrollDom) {
    if (e.cancelable) {
      if (!e.defaultPrevented) {
        e.preventDefault();
      }
    }
  }
};

/**
 * 页面滚动
 * @version 1.0.2
 * @description 需要局部可以滚动，节点追加‘autoScroll’属性
 * @returns {function} disable 禁用滚动
 * @returns {function} enable 允许滚动
 */
const dealScroll = {
  /**
   * 禁用滚动
   */
  disable: function () {
    //绑定事件
    document.body.style.overflow = 'hidden';
    document.body.addEventListener('touchmove', eventTouch, {
      passive: false,
    });
  },
  /**
   * 允许滚动
   */
  enable: function () {
    //移除事件
    document.body.style.overflow = ''; //出现滚动条
    document.body.removeEventListener('touchmove', eventTouch, {
      passive: false,
    });
  },
};

export default dealScroll;

index.vue

<template>
  <div>
 //  需要滑动的区域
 <div  autoScroll="true"></div>
// fixed 固定的头尾
 <div></div>
  </div>
</template>

<script>
import dealScroll from "./dealScroll.js";
export default {
data(){},
beforeDestroy() {
    dealScroll.enable();
 },
mounted() {
   dealScroll.disable();
}
};
</script>