前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >判断浏览器窗口滚动到最底部

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

作者头像
阿超
发布2022-08-21 12:49:08
8170
发布2022-08-21 12:49:08
举报
文章被收录于专栏:快乐阿超快乐阿超

首先是昨天我们说的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('高度低于窗口可视区域高度')
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-03-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档