JavaScript实现页面滚动时Tab自动切换相邻项激活状态

问题根因 #

• 重复事件绑定：在for循环中为window绑定了多个scroll事件监听器，滚动时所有回调会同时触发，直接导致逻辑冲突
• 滚动逻辑缺失：原有逻辑未判断滚动方向、未记录当前激活Tab的索引、未做索引越界校验，仅判断scrollTop > 0就执行切换，无法实现相邻Tab跳转
• 灵敏度问题：scroll事件触发频率极高，未做防抖和触发阈值限制，切换会出现抖动、连跳问题

修复方案 #

原有CSS、HTML代码无需修改，仅需调整JS逻辑即可：

1. 移除循环绑定scroll事件的代码，仅在全局绑定1次scroll监听器
2. 新增状态变量：记录当前激活Tab索引、上一次滚动位置、切换锁（避免动画期间重复触发）、滚动触发阈值
3. 抽离公共Tab切换方法，点击事件、滚动事件均复用该逻辑，减少冗余代码
4. 增加滚动方向判断：当前滚动位置大于上一次记录位置为向下滚动，反之则为向上滚动
5. 增加边界校验：向下滚动时索引不超过Tab总数-1，向上滚动时索引不小于0

修正后完整JS代码 #

window.addEventListener('DOMContentLoaded', ()=> {
    const tabs = document.querySelectorAll('.tab');
    const content = document.querySelectorAll('.content-item');
    // 状态变量
    let activeIndex = 0;
    let lastScrollTop = 0;
    let isSwitching = false;
    const scrollThreshold = 50; // 滚动超过50px才触发切换，避免灵敏度过高
    const switchAnimationDuration = 1500; // 和淡出动画时长保持一致

    // 抽离公共Tab切换方法
    function switchTab(targetIndex) {
        // 索引越界、正在切换、目标就是当前激活项时直接返回
        if (targetIndex < 0 || targetIndex >= tabs.length || isSwitching || targetIndex === activeIndex) return;
        
        isSwitching = true;
        // 移除当前激活项状态
        const prevTab = tabs[activeIndex];
        const prevContent = content[activeIndex];
        const prevIframe = prevContent.querySelector('iframe');
        
        prevTab.classList.remove('tab-active');
        prevContent.classList.remove('content-active');
        prevContent.classList.add('content-show');
        prevIframe.removeAttribute('src');

        setTimeout(() => {
            prevContent.classList.remove('content-show');
        }, switchAnimationDuration);

        // 激活目标项
        const targetTab = tabs[targetIndex];
        const targetContent = content[targetIndex];
        const targetIframe = targetContent.querySelector('iframe');
        
        targetTab.classList.add('tab-active');
        targetContent.classList.add('content-active');
        targetIframe.setAttribute('src', targetIframe.getAttribute('data-src'));

        // 更新当前激活索引，动画结束后解锁
        activeIndex = targetIndex;
        setTimeout(() => {
            isSwitching = false;
        }, switchAnimationDuration);
    }

    // 初始化第一个Tab
    switchTab(0);

    // 绑定Tab点击事件
    for (let i = 0; i < tabs.length; i++) {            
        tabs[i].addEventListener('click', () => switchTab(i));
    }

    // 仅绑定1次scroll事件
    let scrollTimer = null;
    window.addEventListener('scroll', () => {
        // 防抖，避免频繁触发
        if (scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            if (isSwitching) return;
            const currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const scrollDistance = Math.abs(currentScrollTop - lastScrollTop);
            
            // 滚动距离未到阈值不触发切换
            if (scrollDistance < scrollThreshold) return;

            let targetIndex = activeIndex;
            // 判断滚动方向
            if (currentScrollTop > lastScrollTop) {
                // 向下滚动，索引+1
                targetIndex += 1;
            } else {
                // 向上滚动，索引-1
                targetIndex -= 1;
            }

            switchTab(targetIndex);
            lastScrollTop = currentScrollTop;
        }, 50);
    })
})

实现说明 #

• 切换锁isSwitching会在动画执行期间阻止新的切换请求，避免快速滚动时出现多Tab状态混乱
• 滚动阈值和防抖时间可根据实际交互需求调整数值
• 公共switchTab方法统一处理类名增删、iframe资源加载逻辑，后续修改交互只需要调整这一处即可

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