vue中優雅的解決IOS滑動穿透問題

添加指令

在滾動的最外層元素使用該指令

1.適用於彈窗內部不需要滾動的場景

Vue.directive('lockScrollBack', {
  update: function (el, binding, vnode) {
    if (binding.value.includes(true)) {
      el.addEventListener('touchmove', bodyScroll, false)
    } else {
      el.removeEventListener('touchmove', bodyScroll, false)
    }
  },
});

2.適用於彈窗也需要滾動的場景
通過overflow = hidden的方式解決滑動穿透,
*添加該指令的元素需要添加樣式 overflow-y: auto;

Vue.directive('lockScroll', {
  update: function (el, binding, vnode) {
    if (Array.isArray(binding.value)) {
      if (binding.value.includes(true)) {
        el.style.overflow = 'hidden'
      } else {
        el.style.overflow = 'auto'
      }
    } else if (Object.prototype.toString(binding.value)=='[object Object]') {
      el.style.overflow = 'auto';
      for (let key in binding.value) {
        if (binding.value[key]) {
          el.style.overflow = 'hidden';
          break;
        }
      }
    }
  },
});