Vue实现div滚动条到底部加载更多
文章原文:https://www.cnblogs.com/hb88/p/13749143.html
<div ref="box">
<!-- 这里面是内容 -->
</div>
mounted() {
let box = this.$refs.box;
box.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);
}
},
}