实现类fullPage功能：动画滚动时如何禁用后台滚动计数器？

嘿，我懂你遇到的麻烦——动画在跑的时候，滚轮事件还在后台触发，导致counter偷偷往上/往下跳，完全不是你想要的那种像fullPage一样的锁定效果对吧？问题的核心是你没有在动画执行期间阻止滚轮事件的逻辑处理，异步的animate不会自动暂停后续的滚轮监听，所以得加个“锁”来控制。

这里给你一个简单有效的方案：

核心思路 #

添加一个状态变量（比如isAnimating），用来标记当前是否有滚动动画在执行。每次触发滚轮事件时，先检查这个状态：如果动画正在进行，直接跳过计数器的更新和动画逻辑；当动画完成后，再把状态重置为允许处理新的滚轮事件。

修改后的完整代码 #

// 先声明一个全局/合适作用域的状态变量，初始为false
let isAnimating = false;
// 假设你的maxSections已经在其他地方定义好了
// let maxSections = 12; // 比如你的页面有12个section

$('html').on('wheel', function(event) {
    // 关键：如果动画正在执行，直接返回，不处理任何逻辑
    if (isAnimating) return;

    event.preventDefault(); // 可选：阻止原生滚动，避免和动画冲突

    if (event.originalEvent.deltaY > 0) {
        // 向下滚动
        // 先检查是否已经到最后一个section，避免counter溢出
        if (counter >= maxSections) return;
        counter++;
    } else {
        // 向上滚动
        // 检查是否已经到第一个section
        if (counter <= 1) return;
        counter--;
    }

    // 标记动画开始
    isAnimating = true;

    // 执行滚动动画，动画完成后重置状态
    $('html, body').animate({
        scrollTop: $(`.sect-${counter}`).offset().top
    }, 800, function() {
        // 动画结束后，把锁打开，允许处理下一次滚轮事件
        isAnimating = false;
    });

    console.log(counter);
});

额外优化点 #

• 添加event.preventDefault()：可以阻止浏览器的原生滚动行为，避免动画和原生滚动互相干扰，让滚动体验更接近fullPage的流畅感。
• 提前边界检查：在更新counter之前就判断是否已经到达顶部/底部，避免无效的counter变更和动画调用，逻辑更严谨。
• 状态变量的作用域：确保isAnimating在滚轮事件的回调中能访问到，最好放在和counter、maxSections相同的作用域里。

这样修改后，动画执行期间滚轮事件会被直接忽略，counter就不会在后台偷偷递增了，完美实现你想要的锁定效果～

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