css 代码
.box{ width: 500px; height: 500px; overflow-y:auto; }
html
<div class="box" ref="box"> <!--列表内容放在这里--> <!--列表内容如果一次加载不完,一定要保证初次加载时的列表总高度超过box的高度,否则不会产生滚动条--> </div>
js
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);
}
},
}