vue3移动端触底滚动+返回顶部实现_vue3 滚动到顶部

触底滚动+返回顶部

踩坑：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
	}
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

高度获取

• scrollTop：获取滚动的距离
• clientHeight：元素内部高度，包含内边距padding，不包含border、margin
• scrollHeight：元素内容的高度，包括不可见部分