js怎么对元素可视区域进行判定
方案介绍
使用 getBoundingClientRect
getBoundingClientRect 是一个 DOM API，它返回一个对象，包含了元素的左、右、上、下、宽、高等属性，这些属性都是相对于视口的。根据该对象返回值可以通过以下条件判断元素是否在可视范围内：
当 DOMRect.top 小于视口高度 且 DOmRect.bottom 大于0
当 DOMRect.left 小于视口宽度 且 DOmRect.right 大于0
这种方法的优点是简单易用，不需要考虑滚动条的影响，也不需要获取元素的尺寸和位置。缺点是兼容性不太好，IE8 及以下不支持该 API。
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top < window.innerHeight &&
rect.bottom > 0 &&
rect.left < window.innerWidth &&
rect.right > 0
);
}使用 scrollTop 与 offsetTop
scrollTop 是一个属性，表示元素滚动条向下滚动的距离。offsetTop 是一个属性，表示元素相对于其最近的定位父元素的顶部偏移量。通过这两个属性，我们可以计算出元素相对于文档的顶部偏移量，然后再与视口高度和滚动条位置进行比较，判断元素是否在可视区域内：
当 元素距文档顶部距离 - 滚动条位置 < 视口高度 且 元素距文档顶部距离 - 滚动条位置 + 元素高度 > 0
当 元素距文档左侧距离 - 滚动条位置 < 视口宽度 且 元素距文档左侧距离 - 滚动条位置 + 元素宽度 > 0
这种方法的优点是兼容性好，可以支持 IE8 及以上浏览器。缺点是需要考虑滚动条的影响，也需要获取元素的尺寸和位置，比较繁琐。
function isInViewport(element) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const offsetTop = element.offsetTop;
const windowHeight = window.innerHeight;
const elementHeight = element.offsetHeight;
return (
offsetTop - scrollTop < windowHeight &&
offsetTop - scrollTop + elementHeight > 0
);
}使用 IntersectionObserver
IntersectionObserver 是一个新的 API，它可以用来监听元素与其祖先元素或视口的交叉情况。它接受一个回调函数和一个配置对象作为参数，回调函数会在每次元素交叉状态发生变化时被调用，配置对象可以指定观察的根元素、根边界和阈值。通过这个 API，我们可以轻松地判断元素是否在可视区域内 ：
创建一个 IntersectionObserver 实例，并传入一个回调函数和一个配置对象
在回调函数中，根据 entries 参数获取每个被观察元素的交叉信息
判断每个被观察元素的 isIntersecting 属性是否为 true，如果是，则表示元素在可视区域内
function isInViewport(element) {
const observer = new IntersectionObserver(
([entry]) => {
return entry.isIntersecting;
},
{
root: null,
rootMargin: '0px',
threshold: 0,
}
);
observer.observe(element);
}注意事项
元素可视区域的判定需要在滚动事件触发时进行，否则无法及时更新元素的状态。
不同的判定方法可能会受到一些特殊情况的影响，例如元素的定位方式、元素与祖先元素的滚动条、元素的显示状态等。因此需要在实际使用时进行测试和验证。
当需要同时监听多个元素的可视状态时，可以考虑使用
IntersectionObserver来提高性能。当需要进行复杂的可视区域判定时，可以考虑使用第三方库或框架来简化操作，例如
react-intersection-observer、scrollama等。在进行元素的可视区域判定时，需要避免频繁地操作 DOM 和触发回流和重绘，否则会影响页面性能。可以通过防抖或节流等方式进行优化。