js判断dom元素是否出现在当前视口内

方法一，使用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);