触底滚动+返回顶部
踩坑:body、html的高度不能设置为100%,不然监听scroll事件无法生效
window.addEventListener('scroll', () => {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
if (scrollTop + windowHeight == scrollHeight) {
//加载下一页数据
//判断是否存在下一页数据
const totalPage = Math.ceil(tableState.value.total / tableState.value.pagination.pageSize)
if (tableState.value.pagination.currentPage <= totalPage){
debounceFn()
}
}
if (scrollTop >= 400) {
goTop.style.display = 'block'
} else {
goTop.style.display = 'none'
}
goTop.onclick = ()=>{
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
})
高度获取
- scrollTop:获取滚动的距离
- clientHeight:元素内部高度,包含内边距padding,不包含border、margin
- scrollHeight:元素内容的高度,包括不可见部分