滚动时元素可见触发操作的纯JS自适应实现方案

你之前的方案用固定scrollY值判断元素位置，在页面缩放、窗口大小变化或不同设备上都会失效，因为元素的实际位置是动态变化的。下面提供两种纯HTML/CSS/JavaScript的自动适配方案：

方案1：使用Intersection Observer API（推荐） #

这是现代浏览器原生支持的API，专门用于监听元素是否进入视口，性能更优，无需频繁计算滚动位置。

// 获取目标元素
const targetElement = document.getElementById('out');

// 配置监听选项
const observerConfig = {
  root: null, // 以浏览器视口作为根容器
  rootMargin: '0px', // 根容器的边距（无额外边距）
  threshold: 0.1 // 元素10%进入视口时触发回调
};

// 定义监听回调
const handleIntersection = (entries) => {
  entries.forEach(entry => {
    // 判断元素是否处于视口内
    if (entry.isIntersecting) {
      targetElement.style.color = 'red';
    } else {
      targetElement.style.color = 'black';
    }
  });
};

// 创建观察者并启动监听
const observer = new IntersectionObserver(handleIntersection, observerConfig);
observer.observe(targetElement);

关键说明： #

• threshold可调整触发时机：设为0表示元素刚进入视口就触发，设为1表示元素完全进入视口才触发
• 自动适配窗口缩放、大小变化，无需手动更新位置数值
• 相比scroll事件监听，不会在滚动时频繁执行计算，性能更好

方案2：使用getBoundingClientRect（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的旧浏览器，可通过动态计算元素位置实现：

const targetElement = document.getElementById('out');

// 判断元素是否在视口内的工具函数
function isElementVisible(el) {
  const rect = el.getBoundingClientRect();
  // 元素顶部不超过视口底部，且元素底部不低于视口顶部，即视为可见
  return rect.top <= window.innerHeight && rect.bottom >= 0;
}

// 处理滚动和窗口 resize 的逻辑
function updateElementState() {
  if (isElementVisible(targetElement)) {
    targetElement.style.color = 'red';
  } else {
    targetElement.style.color = 'black';
  }
}

// 绑定事件监听
window.addEventListener('scroll', updateElementState);
window.addEventListener('resize', updateElementState);

// 页面加载时初始化状态
updateElementState();

关键说明： #

• getBoundingClientRect()返回元素相对于视口的实时位置信息，每次触发事件都会重新计算
• 同时监听scroll和resize事件，确保窗口缩放或滚动时都能正确判断
• 页面初始化时执行一次，避免初始状态不符合预期

内容的提问来源于stack exchange，提问作者Ahmad Sameh