vue - 监听某个标签滑动到底部

 

mounted(){
    window.addEventListener('scroll',this.handleScroll,true);
},
methods: {
    handleScroll(e){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = e.target.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = e.target.clientHeight;
        //变量scrollHeight是滚动条的总高度
           var scrollHeight = e.target.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight==scrollHeight){
            //写后台加载数据的函数
             console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
            alert("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
        }
    }
}

链接：https://blog.csdn.net/llwy1428/article/details/87122318

或

首先给标签绑定scroll事件

<div @scroll="scrollEvent">
...
</div>

　　

// 滚定监听
    scrollEvent(e) {
      if (
        e.currentTarget.scrollTop + e.currentTarget.clientHeight >=
        e.currentTarget.scrollHeight
      ) {
      // 业务逻辑...
      }
    }

　　链接：https://www.jianshu.com/p/77aa7e1da35a

 

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

链接：https://blog.csdn.net/qq_35430000/article/details/80277587

链接：https://www.cnblogs.com/nanshanlaoyao/p/5964730.html

链接：https://blog.csdn.net/zh_rey/article/details/78967174