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

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

代码语言：javascript复制

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

然后是滚动事件处理：

代码语言：javascript复制

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

代码语言：javascript复制

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('高度低于窗口可视区域高度')
}

overflow scroll 事件

0 人点赞