JQuery滚动事件触发两次问题求助：实现窗口级自动翻页滚动

你的问题根源确实是自动滚动的动画操作会再次触发window的scroll事件，导致逻辑重复执行。可以通过添加一个动画锁定标志来解决，具体修改如下：

var content = 0;
var scrolled = 0;
var contentNum = $('.content').length
var offset = $("#intro").offset();
var lastScrollTop = 0;
var timeout;
// 新增锁定标志，标记是否正在执行自动滚动动画
var isAnimating = false;

$(window).scroll(function() {
    // 如果正在动画，直接忽略本次scroll事件
    if (isAnimating) return;
    
    var st = $(this).scrollTop();
    var scrolled = 0;

    clearTimeout(timeout);  
    timeout = setTimeout(function() {
        if (st > lastScrollTop){
            scrolled = 1;
        } else {
            scrolled = -1;
        }

        if (!(content == 0 && scrolled == -1) && !(content == (contentNum-1) && scrolled == +1)){
            content = content + scrolled;
            offset = $("#intro").eq(content).offset();

            // 开始动画前锁定
            isAnimating = true;
            $('html').animate({
                scrollTop: offset.top,
                scrollLeft: offset.left
            }, 500, function() {
                // 动画完成后解锁
                isAnimating = false;
                // 动画完成后更新lastScrollTop，避免后续判断出错
                lastScrollTop = $(window).scrollTop();
            });

        } else {
            // 没有执行动画时也要更新lastScrollTop
            lastScrollTop = st;
        }

    }, 50);
});

关键修改点： #

• 新增isAnimating变量，用于标记是否正在执行自动滚动动画
• 每次scroll事件触发时，先检查isAnimating，如果为true则直接返回，不处理后续逻辑
• 在动画开始时设置isAnimating = true，动画完成的回调中设置isAnimating = false，确保动画期间的scroll事件被忽略
• 调整lastScrollTop的更新时机，动画完成后再更新，避免手动滚动和自动滚动的scrollTop值冲突

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