js监听点击事件以及页面滚动距离

js监听页面滚动距离

在做vue项目的时候，遇到一个坑记录一下，我尝试在后台管理系统中加入滚动试验一下，然后为了保证样式
就设置了容器的overflow属性：

监听页面滚动发现document.body.scrollTop一直为0，尝试了很多方法，包括，

①增加true属性
②在app.vue中写监听，然后存到store中，尝试了各种方法都没有用，在百度中看到有人说是不是有overflow: scroll／auto。高度100%固定之类的，我才想起来自己加了这个样式，去掉之后就好了！

window.onscroll = function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
}

vue.js监听页面滚动距离

 mounted() {
      window.addEventListener("scroll",this.handleScroll); 
},

记得最后要销毁这个监听要不然会在其他的页面中 执行 报错

destroyed() {
      document.removeEventListener('scroll', this.handleScroll)
}

在methods中定义一个方法

handleScroll() {
//获取滚动时的高度
   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || 	document.body.scrollTop;
   let oneHeight = this.$refs.scrollOne.offsetHeight ;
   let twoHeight = this.$refs.scrollTwo.offsetHeight + oneHeight;
   let threeHeight = this.$refs.scrollThree.offsetHeight + twoHeight;
   // console.log(scrollTop)
   if (scrollTop > 0) {
     //滚动大于0的时候要做的操作
   }
   if (scrollTop > 200) {
     //大于200的时候要做的操作
   }
   if (scrollTop > oneHeight) {
     //这是滑动到scrollTwo的距离要做的操作
   }
   if (scrollTop > twoHeight) {
     //这是滑动到scrollThree要做的操作
   }

	document.addEventListener('click', (e)=> {
      // $(".box").bind("click", function(){
      //   $(".tanchuang").css("display", "flex");
      //   event.stopPropagation();//==========阻止冒泡1
      // })
      // $(document).bind("click", function(){
      //   $(".tanchuang").css("display", "none");
      // });
      // $(".tanchuang").bind("click", function(){
      //   event.stopPropagation();//==========阻止冒泡2
      // })


      if(e.target.className == 'boxChild1'||e.target.className == 'boxChild2'||e.target.className == 'box'){
        this.show();
      }else if(e.target.className != 'tanchuang'){
        this.isShow=false;
      }
    }),