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

【问题标题】：Custom scroll function - flickering effect自定义滚动功能-闪烁效果
【发布时间】：2014-11-25 02:22:19
【问题描述】：

我写了一个滚动动画到下一个div的函数，在firefox中运行良好，但是滚动多次时chrome会闪烁

代码如下：

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 before doing math: jsfiddle.net/ax8obLy5/1 on another note 你重复了很多可以功能化的代码，我猜这只是在开发过程中:)
太好了，谢谢！现在它可以正常工作了。小事......代码重复只是为了测试，是的 - 完成后将成为一个函数。 :) 想要一个被接受的答案？做一个！ :)@haxxxton

标签： javascript jquery html google-chrome

【解决方案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

【讨论】：

再次感谢您的功能... :)