DOM 元素可见性检测：实现滚动加载、动画和交互性

javascript

2024-03-18 02:42:50

## 判断 DOM 元素在当前视口中是否可见

## 概述

在 Web 开发中，判断 DOM 元素是否在当前视口中可见是至关重要的。这有助于实现各种效果，例如：

滚动加载图像
根据元素可见性调整布局
在元素可见时触发动画

## 方法

有多种方法可以判断元素是否可见：

### 方法 1：getBoundingClientRect()

此方法返回元素相对于视口的大小和位置。如果任何部分可见，则会返回非零值。

const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();

if (rect.top < window.innerHeight && rect.bottom > 0) {
  // 可见
}

### 方法 2：Intersection Observer API

此 API 提供了一个观察器，当元素进入或离开视口时触发回调函数。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 可见
    }
  });
});

observer.observe(element);

### 方法 3：自定义滚动事件处理程序

这种方法涉及创建滚动事件处理程序，并检查元素的可见性。

window.addEventListener('scroll', () => {
  const element = document.getElementById('my-element');
  const rect = element.getBoundingClientRect();

  if (rect.top < window.innerHeight && rect.bottom > 0) {
    // 可见
  }
});