如何用纯JS实现滚动向下添加类、向上移除类？

当然可以用纯JavaScript实现这个需求，核心思路是监听滚动事件，对比当前与上一次的滚动位置判断滚动方向，再用原生API操作元素类名。

基础实现代码 #

// 获取需要操作的目标元素（替换成你的选择器）
const targetElement = document.querySelector('.your-target-element');
// 记录上一次的滚动位置
let lastScrollTop = 0;

// 监听页面滚动事件
window.addEventListener('scroll', () => {
    // 获取当前滚动位置（兼容不同浏览器）
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (currentScrollTop > lastScrollTop) {
        // 向下滚动：添加目标类，移除反向类（可选）
        targetElement.classList.add('scrolled-down');
        targetElement.classList.remove('scrolled-up');
    } else {
        // 向上滚动：移除目标类，添加反向类（可选）
        targetElement.classList.remove('scrolled-down');
        targetElement.classList.add('scrolled-up');
    }

    // 更新上一次滚动位置，为下一次判断做准备
    lastScrollTop = currentScrollTop;
});

关键细节说明 #

• window.pageYOffset 和 document.documentElement.scrollTop 结合使用，是为了兼容所有现代浏览器，确保能正确获取滚动距离
• classList.add()/classList.remove() 是原生JS安全操作类名的方法，不会覆盖元素已有的其他类名，比直接修改className更可靠
• 如果你不需要区分向上滚动的类，可以只保留添加/移除目标类的逻辑

优化：添加防抖减少性能消耗 #

滚动事件会频繁触发，给事件回调加防抖可以避免过多不必要的DOM操作，提升页面性能：

const targetElement = document.querySelector('.your-target-element');
let lastScrollTop = 0;
let scrollTimer = null;

window.addEventListener('scroll', () => {
    // 清除之前的定时器
    clearTimeout(scrollTimer);
    // 100ms后执行逻辑（可根据需求调整延迟时间）
    scrollTimer = setTimeout(() => {
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (currentScrollTop > lastScrollTop) {
            targetElement.classList.add('scrolled-down');
            targetElement.classList.remove('scrolled-up');
        } else {
            targetElement.classList.remove('scrolled-down');
            targetElement.classList.add('scrolled-up');
        }
        
        lastScrollTop = currentScrollTop;
    }, 100);
});

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