取消在微信里面上拉拖动或者下拉拖动看到的空白。（也是什么橡皮筋效果）

Posted 2021-03-22 dashaxiong

场景： 如果页面里面的背景是一个图片（如下图）或者是背景颜色来着，那么上拉或者下拉就看到底层白色的背景可能很烦。 

下面是vue里面用具体代码， 因为我是全页面都是颜色做背景，所以我就直接在App.vue里面写全局了。

methods: {
    cancel_scoll_boune() {
      var startY,endY
      document.querySelector(‘body‘).addEventListener("touchstart",function (evt) {
        startY = evt.touches[0].pageY;
      })
      document.querySelector(‘body‘).addEventListener("touchmove", function(evt){
        endY = evt.touches[0].pageY; 
        if(endY>startY && document.querySelector(‘body‘).scrollTop === 0){
          evt.preventDefault()
        }
        var scrollAll = document.querySelector(‘body‘).scrollTop + document.querySelector(‘body‘).clientHeight
        var currentHeight = document.querySelector(‘body‘).scrollHeight
        if(endY<startY && scrollAll>= currentHeight){
          evt.preventDefault()
        }
      },{ passive: false});
    }
  },
  mounted() {
    this.cancel_scoll_boune()
  }

　　

　原理： 利用阻止冒泡事件 evt.preventDefault()，后面还要加{ passive: false} （我发现我每加，达不到效果）。 

知道原理，其他的就好做了，就是判断上滑到顶部或者到最底部就禁止继续滑动就好。 （虽然说效果不是很好，但是足够了。）

可以用到的地方，就是页面不要求上拉或者下拉刷新的页面。

 

拓展:  如果觉得不好，其实可以利用better-scroll 或者 iscroll插件都可以， 而且还可以做上拉刷新下拉加载。  我一般不想用better-scroll，就是好多弹窗的时候，页面就做的很烦（可能是新手能力不足吧）。

 

一颗小萌新。 大佬看不下去，记得给我推荐好的教程链接，拜托。