其他分享
首页 > 其他分享> > 判断元素是否将要出现在可视区域 ele.getBoundingClientRect().top

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

作者:互联网

这种要实时监听.getBoundingClientRect().top

<div></div>
1. 获取可视区域高度
height = document.body.offsetHeight
2. 获取元素距离浏览器 body 的 top border的距离
distanceBodyAbove = document.querySelector('div').getBoundingClientRect().top

如果height < distanceBodyAbove  说明元素以及进入可视区域了

第二种:一开始就获取一次.getBoundingClientRect().top,然后通过监听document.documentElement.scrollTop

function scroll() {
    //在这里判断 this.documentElement.scrollTop + distanceBodyAbove > height ? 出现在可视区域 :没有
}
document.onscroll = scroll

标签:可视,getBoundingClientRect,ele,height,distanceBodyAbove,document,top
来源: https://www.cnblogs.com/Lilc20201212/p/16407376.html