如何用原生JS实现特定元素进入视口时添加CSS类（支持移动端）

推荐实现：用Intersection Observer API（高效且现代） #

你之前的React代码是通过监听滚动距离触发类名变化，现在要改成监听特定元素是否进入视口，最适合用Intersection Observer API——这是浏览器原生提供的专门检测元素可见性的API，比监听scroll事件性能好得多，不用自己计算滚动位置。

下面是用getElementById获取目标元素的完整实现：

<!-- HTML结构 -->
<div class="App">
  <h1 id="targetHeading">Hello, World</h1>
</div>

<style>
/* 示例样式 */
.blue {
  color: blue;
  transition: color 0.3s ease;
}
</style>

<script>
// 获取目标元素
const target = document.getElementById('targetHeading');

// 配置观察器参数：用视口作为根容器，元素10%进入视口就触发
const observerConfig = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

// 触发回调：元素进入/离开视口时执行
const handleIntersection = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      target.classList.add('blue');
    } else {
      // 可选：离开视口时移除类，根据你的需求决定是否保留
      target.classList.remove('blue');
    }
  });
};

// 创建并启动观察器
const observer = new IntersectionObserver(handleIntersection, observerConfig);
observer.observe(target);
</script>

兼容旧浏览器的备选方案（用scroll事件） #

如果需要兼容非常老的浏览器（比如IE11），可以用scroll事件结合getBoundingClientRect()判断元素位置，记得加防抖优化性能：

const target = document.getElementById('targetHeading');

function checkVisibility() {
  const rect = target.getBoundingClientRect();
  // 判断元素是否处于视口内：顶部小于视口高度，底部大于0
  const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
  
  isVisible ? target.classList.add('blue') : target.classList.remove('blue');
}

// 防抖处理，避免滚动时频繁触发
let debounceTimer;
window.addEventListener('scroll', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(checkVisibility, 100);
});

// 页面加载时先检查一次
checkVisibility();

关于「是否仅能在移动端生效」的问题 #

完全不是。不管是上面哪种实现，桌面端、移动端、平板等所有支持标准JavaScript的环境都能正常运行——只要浏览器支持对应的API（现在主流浏览器包括PC端Chrome、Firefox，移动端Safari、Chrome都完全支持），就能实现效果。

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