如何判断 dom 元素是否在可视区域

Question

关键词：元素是否在可视区域

判断 DOM 元素是否在可视区域可以使用以下方法：

getBoundingClientRect() 方法

该方法返回元素的大小及其相对于视口的位置，包括 top、right、bottom、left 四个属性。我们可以根据这四个属性来判断元素是否在可视区域内。

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)
  );
}

// Example usage
const element = document.getElementById('my-element');
if (isInViewport(element)) {
  console.log('Element is in viewport');
} else {
  console.log('Element is not in viewport');
}

IntersectionObserver API

该 API 可以观察元素与其祖先元素或视口交叉的情况，并且可以设置回调函数，当元素的可见性发生变化时会调用该回调函数。

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in viewport');
    } else {
      console.log('Element is not in viewport');
    }
  });
}

const observer = new IntersectionObserver(callback);

const element = document.getElementById('my-element');
observer.observe(element);

使用 IntersectionObserver API 的优点是可以减少不必要的计算和事件监听，提高了性能。