阿超 > 判断浏览器窗口滚动到最底部

判断浏览器窗口滚动到最底部

2022-03-18

前端

任何人都应该有自尊心自信心独立性，不然就是奴才。但自尊不是轻人，自信不是自满，独立不是弧立。——徐特立

首先是昨天我们说的vue中绑定@scroll事件，别忘了加对应的高度，以及检查overflow-y：

1
2
3
<div @scroll="onScroll" class="allow-scroll">
    我是很高很长很长（超过外部div高度）的内容...
</div>

然后是滚动事件处理：

1
2
3
4
5
6
7
8
onScroll(e) {
  // Y轴滚动距离 偏移高度 总高度
  let { scrollTop, clientHeight, scrollHeight } = e.target
  console.log(`scrollTop + clientHeight ${scrollTop + clientHeight} >= scrollHeight-1 ${scrollHeight - 1}`)
  if (scrollTop + clientHeight >= scrollHeight - 1) {
    console.log('滚到底部啦！！！')
  }
}

我此处场景属于用户条款，那么还有一种情况，是窗口内容小于了我们外部div

1
2
3
4
5
6
7
8
9
10
11
let allowScroll = document.querySelector('.allow-scroll')
console.log({ allowScroll })
if (!allowScroll) {
  return
}
console.log(
  `allowScroll.scrollHeight ${allowScroll.scrollHeight} <= allowScroll.clientHeight ${allowScroll.clientHeight}`
)
if (allowScroll.scrollHeight <= allowScroll.clientHeight) {
  console.log('高度低于窗口可视区域高度')
}