方法一,使用getBoundingClientRect
function isInViewport(element) { //判断方法
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const myElement = document.querySelector('#data-board-sales-hopper'); //获取需要判断的dom
if (isInViewport(myElement)) {
alert('该元素在视口内')
} else {
alert('该元素不在视口内')
}
方法二,使用IntersectionObserver观察,特别注意:IntersectionObserver 不是完美精确到像素级别,存在延迟,使用时需要注意
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
console.log(entry.intersectionRect); //当元素存在视口中时,输出结果为true,除此之外entry对象内还有很多其他参数, intersectionRect是存放元素的可见部分(例如高度等),target是我们将要观察的页面上的实际元素
}, options);
const dom = document.querySelector('.classname');
observer.observe(dom);