判断元素是否将要出现在可视区域 ele.getBoundingClientRect().top

[复制链接]
发表于 2022-8-9 14:39:46 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
这种要实时监听.getBoundingClientRect().top
  1. 1. 获取可视区域高度
  2. height = document.body.offsetHeight
  3. 2. 获取元素距离浏览器 body 的 top border的距离
  4. distanceBodyAbove = document.querySelector('div').getBoundingClientRect().top
  5. 如果height < distanceBodyAbove  说明元素以及进入可视区域了
复制代码
第二种:一开始就获取一次.getBoundingClientRect().top,然后通过监听document.documentElement.scrollTop
  1. function scroll() {
  2.     //在这里判断 this.documentElement.scrollTop + distanceBodyAbove > height ? 出现在可视区域 :没有
  3. }
  4. document.onscroll = scroll
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
继续阅读请点击广告
回复

使用道具 举报

×
登录参与点评抽奖,加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表