自定义滚动功能 - 闪烁效果

Question

我为下一个div写了一个滚动动画的函数，它在firefox中完美运行，但滚动多次时chrome闪烁

Here is a fiddle

以下是代码：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;
    var flag = true;
    $('#start').bind(mousewheelevt, function(e){

        var evt = window.event || e ;
        evt = evt.originalEvent ? evt.originalEvent : evt;
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

        if(delta < 0 && flag == true)
        {
            flag = false;
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $('#hotels').offset().top

            }, 2000, function ()  {
                flag = true;
                flag1 = true;
                flag2 = true;
            });

        }

    });

    var mousewheelevt1 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;
    var flag1 = true;
    $('#hotels').bind(mousewheelevt1, function(e){

        var evt = window.event || e ;
        evt = evt.originalEvent ? evt.originalEvent : evt;
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

        if(delta < 0 && flag1 == true)
        {
            flag1 = false;
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $('#training').offset().top
            }, 2000, function ()  {
                flag = true;
                flag1 = true;
                flag2 = true;
        });

        }
        else if (delta > 0 && flag1 == true) {
            flag1 = false;
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $('#start').offset().top
            }, 2000, function ()  {
                flag = true;
                flag1 = true;
                flag2 = true;
            });

        }
    });
    var mousewheelevt2 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;
    var flag2 = true;
    $('#training').bind(mousewheelevt2, function(e){

        var evt = window.event || e ;
        evt = evt.originalEvent ? evt.originalEvent : evt;
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

        if(delta < 0)
        {


        }
        else if (delta > 0 && flag2 == true) {
            flag2 = false;
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $('#hotels').offset().top
            }, 2000, function ()  {
                flag = true;
                flag1 = true;
                flag2 = true;
            });

        }
    });

有人知道如何让它在Chrome中运行得很好吗？

Answer 1

根据我的经验，立即对preventDefault()几乎总是一个好主意，然后进行剩余的处理。 （当然除非preventDefault需要基于计算值）

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

function transitionTo(elem){
    $('html, body').stop().animate({
        scrollTop: $(elem).offset().top

    }, 2000, function ()  {
        flag = true;
        flag1 = true;
        flag2 = true;
    });
}

function getDelta(e){
    var evt = window.event || e ;
    evt = evt.originalEvent ? evt.originalEvent : evt;
    return evt.detail ? evt.detail*(-40) : evt.wheelDelta;
}

var flag = true;
$('#start').bind(mousewheelevt, function(e){
    e.preventDefault();
    var delta = getDelta(e);

    if(delta < 0 && flag == true)
    {
        flag = false;
        transitionTo('#hotels');
    }

});

var flag1 = true;
$('#hotels').bind(mousewheelevt, function(e){
    e.preventDefault();
    var delta = getDelta(e);

    if(delta < 0 && flag1 == true)
    {
        flag1 = false;
        transitionTo('#training');
    }
    else if (delta > 0 && flag1 == true) {
        flag1 = false;
        transitionTo('#start');
    }
});

var flag2 = true;
$('#training').bind(mousewheelevt, function(e){
    e.preventDefault();
    var delta = getDelta(e);

    if(delta < 0)
    {


    }
    else if (delta > 0 && flag2 == true) {
        flag2 = false;
        transitionTo('#hotels');
    }
});

稍微清理代码，因为它更容易看到更改

<强> DEMO