Animate（）無法與scrollTop一起正常使用

Question

我試圖制作一個腳本，當我滾動鼠標時，該腳本會自動將頁面滾動到特定元素，但是由於某種原因，我的動畫會重復出現，並且來回滾動。

編輯：我想指出的是，如果頁面滾動到頁面上的最后一個元素，則不會發生，但是如果滾動到第二個元素，它將立即彈回頂部。

這是我的jQuery：

$(document).ready(function(){
comp = 0;
current_scroll_position = $(window).scrollTop();
console.log("CURRENT SCROLL POSITION = " +current_scroll_position);

second = $("#second").offset().top;




$(window).scroll(function(scroll_action){

    $('body').on({
        'mousewheel': function(e) {
                e.preventDefault();
                e.stopPropagation();
        }
    });

    if(comp==0){

        console.log("COMP =" +comp);
        comp++;

        new_scroll_position = $(window).scrollTop();

        console.log("YOU SCROLLED, NEW CURRENT POSITION IS :" +new_scroll_position);

        if (new_scroll_position > current_scroll_position){ //scroll going down



            console.log(new_scroll_position +" > "+ current_scroll_position +" GOING DOWN");




                $('body').animate({

                    scrollTop: second
                }, 500,
                function(){ //callback function for completed animation
                    completed_animation_scroll = true;
                    current_scroll_position = $(window).scrollTop();

                    console.log(" ANIMATING ");
                    console.log("CURRENT SCROLL POSITION = " +current_scroll_position);
                    console.log("NEW SCROLL POSITION = " +new_scroll_position);
                    console.log("ANIMATION COMPLETED = " +completed_animation_scroll);
                    console.log(" ******************* ************************ ******************");

                    $('body').unbind('mousewheel');
                    comp = 0;




                 });




        }
        else{

            console.log(new_scroll_position +" > "+ current_scroll_position +" GOING DOWN");

                $('body').animate({

                    scrollTop: 0
                }, 500,
                function(){ //callback function for completed animation
                    completed_animation_scroll = true;
                    current_scroll_position = $(window).scrollTop();

                    console.log(" ANIMATING ");
                    console.log("CURRENT SCROLL POSITION = " +current_scroll_position);
                    console.log("NEW SCROLL POSITION = " +new_scroll_position);
                    console.log("ANIMATION COMPLETED = " +completed_animation_scroll);
                    console.log(" ******************* ************************ ******************");

                    $('body').unbind('mousewheel');
                    comp = 0;




                 });

        }
    }
});
});

試試看： http : //jsfiddle.net/81t6w6zv/2/

Answer 1

問題實際上是在完成滾動動畫時（包括成功回調）， $(window).scroll處理程序被觸發並再次起作用（因為滾動動畫實際上正在滾動並且comp等於0 ）。

修復它的最簡單方法是使用setTimeout在滾動動畫回調函數中包裝comp = 0 （我將comp變量的類型更改為bool）：

setTimeout
(
    function()
    {
        comp = false;
    },
    100
);

還有一些“不好的事情”，例如綁定mousewheel事件處理程序，但不取消綁定它（如果comp不等於0 ），因此請查看更新的小提琴，以解決代碼中的此類問題。

以及完整的代碼：

$(document).ready(function()
{
    var comp = false;
    var current_scroll_position = $(window).scrollTop();
    var secondOffsetTop = $("#second").offset().top;  

    $(window).scroll(function()
    {
        if (comp)
        {
            return;
        }
        comp = true;

        $('body').on('mousewheel', function()
        {
            return false;
        });

        var scrollTo = 0;
        if ($(window).scrollTop() > current_scroll_position)
        {
            scrollTo = secondOffsetTop;
        }

        $('body').animate
        (
            {
                scrollTop: scrollTo
            },
            500,
            function()
            {
                current_scroll_position = $(window).scrollTop();
                $('body').off('mousewheel');
                setTimeout
                (
                    function()
                    {
                        comp = false;
                    },
                    100
                );
            }
        );
    });
});