原生JS+CSS实现滚动元素显隐：自定义Waypoints脚本问题排查

看来你在手动实现类似waypoints.js的功能时遇到了两个常见的滚动检测问题，我来帮你逐一分析并给出修复方案：

问题1：快速滚动到底部时类切换未触发，反而向上滚动时触发 #

原因分析 #

快速滚动时，浏览器的scroll事件可能因为频繁触发被浏览器节流（丢帧），导致你的检测逻辑错过了元素到达“一半高度”的瞬间。另外，原有的判断逻辑不够精准，只考虑了视口底部与元素顶部的关系，没有结合元素自身位置做更准确的判定。

修复方案 #

你可以选择两种方式解决：

方案A：优化滚动检测逻辑+添加节流函数

先优化判断逻辑，改为检测元素的中点是否进入视口，更符合你“滚动到元素一半高度位置”的需求；再给scroll事件添加节流，减少触发频率，避免浏览器丢帧：

const waypoints = document.querySelectorAll('.waypoint');

// 节流函数：限制函数执行频率，避免滚动事件过度触发
function throttle(func, delay = 100) {
  let lastExecutionTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecutionTime >= delay) {
      lastExecutionTime = now;
      func.apply(this, args);
    }
  };
}

function checkpoint() {
  waypoints.forEach(waypoint => {
    // 计算元素的垂直中点位置
    const elementMidpoint = waypoint.offsetTop + waypoint.clientHeight / 2;
    // 计算视口底部的位置
    const viewportBottom = window.scrollY + window.innerHeight;
    // 判断元素中点是否进入视口（即滚动到元素一半高度的位置）
    const isHalfVisible = elementMidpoint <= viewportBottom;
    // 额外判断：元素未完全滚出视口顶部，避免向上滚动时重复触发
    const isNotScrolledPast = waypoint.offsetTop > window.scrollY - waypoint.clientHeight;

    const classToAdd = waypoint.dataset.classtoadd;
    const classToRemove = waypoint.dataset.classtoremove;

    if (isHalfVisible && isNotScrolledPast) {
      waypoint.classList.add(classToAdd);
      waypoint.classList.remove(classToRemove);
    } else {
      // 可选：当元素完全离开视口时恢复初始类
      waypoint.classList.add(classToRemove);
      waypoint.classList.remove(classToAdd);
    }
  });
}

// 绑定节流后的滚动事件
window.addEventListener('scroll', throttle(checkpoint));

方案B：使用原生Intersection Observer API（更推荐）

浏览器原生的IntersectionObserver专门用于检测元素可见性，性能远优于监听scroll事件，且不会出现快速滚动丢帧的问题：

const waypoints = document.querySelectorAll('.waypoint');

// 配置观测选项：当元素中点进入视口时触发
const observerOptions = {
  root: null, // 使用浏览器视口作为根容器
  // 根边距设置：向上偏移视口高度的一半，使得元素中点进入视口时触发
  rootMargin: `-${window.innerHeight / 2}px 0px`,
  threshold: 0 // 只要有1px可见就触发
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const classToAdd = entry.target.dataset.classtoadd;
    const classToRemove = entry.target.dataset.classtoremove;
    
    if (entry.isIntersecting) {
      entry.target.classList.add(classToAdd);
      entry.target.classList.remove(classToRemove);
    } else {
      entry.target.classList.add(classToRemove);
      entry.target.classList.remove(classToAdd);
    }
  });
}, observerOptions);

// 开始观测所有waypoint元素
waypoints.forEach(waypoint => observer.observe(waypoint));

问题2：页面中间位置刷新时，元素仍保留初始透明类 #

原因分析 #

页面刷新时，scroll事件不会自动触发，你的检测逻辑只有在滚动时才执行，导致已经在视口内的元素无法被正确判定状态。

修复方案 #

只需要在页面加载完成后，手动执行一次检测逻辑即可：

如果使用方案A的代码，添加：

// 页面DOM加载完成后初始化元素状态
document.addEventListener('DOMContentLoaded', checkpoint);

如果使用方案B的IntersectionObserver，则不需要额外代码——因为Observer会在初始化时自动检测所有被观测元素的可见状态。

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