Javascript/Jquery 滚动事件移动屏幕高度触发两次

Question

创建一个自动滚动事件到窗口大小的下一张幻灯片/页面。但每次滚动时，该事件都会触发两次。我猜测是因为也检测到自动滚动事件作为触发器并再次滚动。有办法解决吗？

        var content = 0;
        var scrolled = 0;
        var contentNum = $('.content').length
        var offset = $("#intro").offset();
        var lastScrollTop = 0;
 
        var timeout;

        $(window).scroll(function() {
            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 = $(".content").eq(content).offset();

                    $('html').animate({
                        scrollTop: offset.top,
                        scrollLeft: offset.left
                    }, 500);

                }

                lastScrollTop = st;

            }, 50);

            
        });

尝试使用全局变量，但仍然触发两次。

Answer 1

您可以将 event.deltaY 与 .on("wheel") 侦听器一起使用。您必须使用 isScrolling 变量进行控制。

   var content = 0;
    var contentNum = $('.content').length;
    var isScrolling = false;

    $(window).on("wheel", function(event) {
        if (isScrolling) return;

        var delta = event.originalEvent.deltaY;
        if (delta > 0 && content < contentNum - 1) {
            console.log("up")
            content++;
        } else if (delta < 0 && content > 0) {
            console.log("down")

            content--;
        } else {
            return;
        }

        var offset = $(".content").eq(content).offset();
        isScrolling = true;
        $('html').animate({
            scrollTop: offset.top,
            scrollLeft: offset.left
        }, 500, function() {
            isScrolling = false;
        });
    });