Question

<script type="text/javascript">
function scrollFunc(e) {
userScroll=true;
    if ( typeof scrollFunc.x == 'undefined' ) {
        scrollFunc.x=window.pageXOffset;
        scrollFunc.y=window.pageYOffset;
    }
    var diffX=scrollFunc.x-window.pageXOffset;
    var diffY=scrollFunc.y-window.pageYOffset;
if(userScroll)
{
if( diffY<0 ) {
         $(".myCar").animate({"top": "+=50px"},1000);// Scroll down
        alert('down');
        //$(".myCar").stop();
    } else if( diffY>0 ) {
        $(".myCar").animate({"top": "-=50px"},1000);

        alert('Up');// Scroll up
    } else {
        // First scroll event
    }
    userScroll=false;
}
else
{

}
    scrollFunc.x=window.pageXOffset;
    scrollFunc.y=window.pageYOffset;
}
window.onscroll=scrollFunc
</script>

我正在尝试检测，向上和向下滚动，但是，它显示两者的警报信息，我的意思是，如果我向下或向上滚动，它会显示两个警报消息。需要帮助。!!

Answer 1

您的代码适合我（在Opera和Firefox中测试过）。但是，查看您的代码，我想您希望onscroll事件仅在每次滚动“操作”时触发一次，而不是多次。

如果您的意图如此，则可以使用this article中描述/实施的自定义scrollstart和scrollstop个事件...

function animateCar(upDown) {
    $(".myCar").animate({"top": (upDown == 1) ? "+=50px" : "-=50px"}, 1000);
}

(function(){
    var lastScrollTop = 0;
    $(window).on("scrollstart", function(){
        lastScrollTop = $(this).scrollTop();
    });
    $(window).on("scrollstop", function(){
        animateCar(lastScrollTop - $(this).scrollTop() > 0 ? -1 : 1);
    });
})();

DEMO (JSFiddle)

如果你想保持你的代码的原始行为，你可以使用jQuery重写它 - 也许它可以解决你遇到的错误：

$(window).scroll((function(){
    var lastScrollTop = 0;
    return function(){
        $(".myCar").animate({"top": (lastScrollTop - $(this).scrollTop() < 0) ? "+=50px" : "-=50px"}, 1000);
        lastScrollTop = $(this).scrollTop();
    };
})());

使用javascript检测向上和向下滚动

1 个答案: