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<deviceHeight){
            self.topFlag=false;
          }
        };
      }
}

回到顶部按钮

啦啦啦aaaa只执行一次

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React简介 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款...
    九把鱼阅读 4,489评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,917评论 2 17
  • 1.第一种方式:锚链接 优点:简单快速,没有兼容性问题 缺点: 视觉上不够直观,用户体验不太好 2.js的方式: ...
    love2013阅读 809评论 0 0
  • 基本概念 事件是一些特定动作发生时所发出的信号,JavaScript中的事件是可以被 JavaScript 侦测到...
    Zd_silent阅读 495评论 0 1
  • 感恩宇宙给予的能量,让我每天觉知自己,感恩女儿辛勤的付出,在这次期末考试中提升了不少,给她信心,也坚定我只要做好我...
    liuxiaorui阅读 96评论 0 0