onscroll事件

思考:

document.getElementById('scrollBar').onscroll=function(){...}
开始我以为这个onscroll事件是当我手动往上滚动的时候(即自己主观能动)才会触发,然而,当添加了一个回到顶部按钮,这时候是js执行,滚动条高度发生变化,这时候onscroll事件也会自动执行,即相当于一个实时监控的watch事件呀!!!

    mounted:function(){
      var self = this;
      self.topAppear();
   }
    methods: {
      topAppear:function(){
        var self=this;
          console.log("啦啦啦aaaa");
         document.getElementById('scrollBar').onscroll = function(){
          console.log("啦啦啦yayaya");
          var h = document.getElementById('scrollBar').scrollTop;
          var deviceHeight=document.documentElement.clientHeight;//屏幕高度
          var elHeight=document.getElementById('scrollBar').scrollHeight;//可滚动的范围
          if (h+deviceHeight+50>=elHeight) {
            var pagesize=10;
            if(self.limitRush){
              self.limitRush=false;
              self.getInitProd(pagesize,self.pageno);
            }
          }else if(h>deviceHeight+200){
            self.topFlag=true;
          }else if(h

onscroll事件_第1张图片
回到顶部按钮

onscroll事件_第2张图片
啦啦啦aaaa只执行一次

==> 注:开始的 啦啦啦yayaya是手动往下拉执行的,后面的 啦啦啦yayaya是回到顶部按钮执行的。

你可能感兴趣的:(onscroll事件)