利用IntersectionObserver API实现滚动动态显示/隐藏元素

IntersectionObserver API是现代浏览器提供的一个高效观察元素可见性变化的接口，非常适合实现滚动时动态显示和隐藏元素的效果。

基本实现步骤

1. 创建观察器

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      entry.target.classList.add('show');
    } else {
      // 元素离开视口
      entry.target.classList.remove('show');
    }
  });
}, {
  threshold: 0.1 // 当元素10%可见时触发回调
});

2. 观察目标元素

const elements = document.querySelectorAll('.animate-element');
elements.forEach(el => observer.observe(el));

3. CSS样式设置

.animate-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-element.show {
  opacity: 1;
  transform: translateY(0);
}

高级配置选项

观察器配置参数

const options = {
  root: null, // 相对于视口观察
  rootMargin: '0px', // 观察区域的边距
  threshold: [0, 0.1, 0.5, 1] // 多个触发阈值
};

性能优化

1. 取消观察：当不再需要观察元素时

observer.unobserve(element);

2. 一次性动画：动画只需执行一次

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
      observer.unobserve(entry.target); // 执行后取消观察
    }
  });
});

实际应用示例

导航栏滚动显隐

const nav = document.querySelector('nav');
const navObserver = new IntersectionObserver(([entry]) => {
  nav.classList.toggle('sticky', !entry.isIntersecting);
}, {threshold: 0});

navObserver.observe(document.querySelector('.hero-section'));

图片懒加载

const lazyImageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      lazyImageObserver.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  lazyImageObserver.observe(img);
});

浏览器兼容性

IntersectionObserver API在现代浏览器中得到良好支持(Chrome 51+, Firefox 55+, Edge 15+, Safari 12.1+)。对于旧版浏览器，可以使用IntersectionObserver polyfill。

这种实现方式比传统的scroll事件监听更加高效，因为浏览器可以优化IntersectionObserver的性能，避免频繁触发回调函数。