jQuery实现鼠标滚轮滚动切换对应section功能失效问题排查

问题根因 #

• 未阻止滚轮默认行为：浏览器原生滚动和代码手动设置的滚动位置冲突，导致页面反复跳动出现闪烁
• 节流逻辑错误：原有justscrolled标记仅在单次事件内翻转，没有设置冷却周期，高频触发的滚轮事件会连续执行多次滚动逻辑，覆盖你设置的目标位置
• 事件兼容性不足：mousewheel属于旧版非标准事件，部分浏览器不支持，应该使用标准wheel事件
• 全局变量缺失：代码未初始化scrollPos、maxScroll两个全局变量，容易出现未定义异常

修复方案 #

调整逻辑如下：

1. 滚轮事件触发时先调用event.preventDefault()阻止默认滚动行为，避免和手动设置的滚动位置冲突
2. 给滚动逻辑增加固定时长的节流，滚动完成后1秒内不响应新的滚轮操作，避免连续触发
3. 补充全局变量初始化，确保索引和你的section id命名规则匹配
4. 替换为标准wheel事件，适配更多浏览器

修复后完整代码：

// 全局变量初始化，根据实际页面情况调整参数
var scrollPos = 0; // 默认展示第一个section，索引和section id对应
var maxScroll = 3; // 取值为你的section总数减1，比如页面有4个section就设为3
var isScrolling = false; // 滚动状态标记，用于节流

function scrollUp(){
    if(scrollPos > 0){
        scrollPos--;
        scrollToSection(scrollPos);
    }
}

function scrollDown(){
    if(scrollPos < maxScroll){
        scrollPos++;
        scrollToSection(scrollPos);
    }
}

function scrollToSection(index){
    isScrolling = true;
    const targetOffset = $("#section" + index).offset().top;
    // 无动画直接跳转写法
    $(document).scrollTop(targetOffset);
    // 如需平滑滚动，注释上面一行，用下面的animate写法
    // $('html, body').stop().animate({scrollTop: targetOffset}, 600);
    
    // 滚动完成后1秒解除节流，可根据需要调整时间
    setTimeout(() => {
        isScrolling = false;
    }, 1000);
}

// 绑定标准wheel事件
$(window).on('wheel', function(event) {
    // 节流期间不响应滚动操作
    if(isScrolling) return;
    // 阻止默认滚动，避免冲突
    event.preventDefault();
    // deltaY小于0为滚轮向上，大于0为滚轮向下
    event.originalEvent.deltaY < 0 ? scrollUp() : scrollDown();
});

注意事项 #

• 代码中的maxScroll要根据你页面实际的section数量调整，确保索引不会越界
• 如果使用平滑滚动的animate写法，节流时间可以和动画时长保持一致，体验更佳

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