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

我为下一个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中正常运行？

最佳答案

以我的经验，立即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