当前位置：首页 > JavaScript

js实现视口

2026-01-15 14:10:02JavaScript

js实现视口检测的方法

使用JavaScript检测元素是否进入视口（viewport）可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法：

Intersection Observer API方法（推荐）

Intersection Observer是现代浏览器提供的API，性能高效且易于使用：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
      // 执行需要的操作
    } else {
      console.log('元素离开视口');
    }
  });
});

const targetElement = document.querySelector('.target');
observer.observe(targetElement);

手动计算元素位置方法

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

window.addEventListener('scroll', () => {
  const element = document.querySelector('.target');
  if (isInViewport(element)) {
    console.log('元素进入视口');
  }
});

视口检测的高级用法

阈值设置

Intersection Observer支持设置触发阈值：

const observer = new IntersectionObserver(callback, {
  threshold: [0, 0.25, 0.5, 0.75, 1] // 元素可见比例达到这些值时触发
});

懒加载实现

结合视口检测实现图片懒加载：

const lazyImages = document.querySelectorAll('img.lazy');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      imageObserver.unobserve(img);
    }
  });
});

lazyImages.forEach(img => imageObserver.observe(img));