微信浏览器禁止页面下拉查看网址导致其他scroll失效

移动端有 touchstart touchmove 绘制矩形，发现向下移动时会出现页面下拉，看到浏览网页地址。如何禁用该问题呢？

解决方法：

document.addEventListener(
"touchmove",
function(e){
    e.preventDefault();
},
{ 
    passive: false 
});

短短几行代码确实完美解决了！但是副作用却很大，导致网页内其他 scroll 全部失效，这该如何解决呢？

方案一：prevent-scroll

var overscroll = function(el) {
  el.addEventListener('touchstart', function() {
    var top = el.scrollTop
      , totalScroll = el.scrollHeight
      , currentScroll = top + el.offsetHeight;
    if(top === 0) {
      el.scrollTop = 1;
    } else if(currentScroll === totalScroll) {
      el.scrollTop = top - 1;
    }
  });
  el.addEventListener('touchmove', function(evt) {
    if(el.offsetHeight < el.scrollHeight)
      evt._isScroller = true;
  });
}
overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
  if(!evt._isScroller) {
    evt.preventDefault();
  }
});

此方案可以解决上下滑动 scroll，对于左右 scroll 需要再改改！

方案二：移除事件

const scrollBox = ref();

const preventMethod = (e) => {
  e.preventDefault();
};
//添加禁止滑动
document.addEventListener("touchmove", preventMethod, { passive: false });
//按下时移除
scrollBox.value.addEventListener("touchstart", (e) => {
   document.removeEventListener("touchmove", preventMethod);
});
//滑动结束后再加阻止默认事件
scrollBox.value.addEventListener("touchend", (e) => {
   document.addEventListener("touchmove", preventMethod, { passive: false });
});

此方法写的较简约，使用 vue3 setup ，看不懂的勿喷！