2 
<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>

上下にスクロールして検出しようとしていますが、両方の警告メッセージが表示されます。つまり、上下にスクロールすると、両方の警告メッセージが表示されます。助けが必要。！！

4

1 に答える 1

1

あなたのコードは私にとってはうまく機能します（OperaとFirefoxでテストされています）。onscrollただし、コードを見ると、イベントが複数回ではなく、スクロール「アクション」ごとに1回だけ発生するようにしたいと思います。

これがあなたの意図である場合は、この記事で説明/実装されているカスタム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);
    });
})();

デモ（JSFiddle）


コードの元の動作を維持したい場合は、jQueryを使用してコードを書き直すことができます。おそらく、発生しているエラーを解決します。

$(window).scroll((function(){
    var lastScrollTop = 0;
    return function(){
        $(".myCar").animate({"top": (lastScrollTop - $(this).scrollTop() < 0) ? "+=50px" : "-=50px"}, 1000);
        lastScrollTop = $(this).scrollTop();
    };
})());
于 2012-08-18T16:27:01.947 に答える