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
                );
            }
        );
    });
});