-
可视高度(offsetHeight):通过
dom
的offsetHeight
获得,表示区域固定的高度。这里我推荐通过getBoundingClientRect()
来获取高度,因为使用前者会引起浏览器回流,造成一些性能问题。 -
滚动高度(scrollTop):滚动事件中通过
e.target.scrollTop
获取,表示滚动条距离顶部的px -
实际高度(scrollHeight):通过
dom
的scrollHeight
获得,表示区域内所有内容的高度(包括滚动距离),也就是实际高度 -
触发条件:
可视高度
+滚动距离
+reachBottomDistance(
离底部的距离变量)
>=实际高度
export default {
data(){
return {
isReachBottom: false,
reachBottomDistance: 100
scrollHeight: 0,
offsetHeight: 0,
}
},
mounted(){
// 页面加载完成后 将高度存储起来
let dom = document.querySelector('.scroll-container')
this.scrollHeight = dom.scrollHeight
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if(currentHeight < this.scrollHeight && this.isReachBottom){
this.isReachBottom = false
}
if(this.isReachBottom){
return
}
if (currentHeight >= this.scrollHeight) {
this.isReachBottom = true
console.log('触底')
}
}
}
}