animate() ではなく、ユーザーがスクロールするときにのみ Scroll を呼び出します。

Question

ページ全体に「トップに行く」ことを目的としたリンクがいくつかあります。これは、素晴らしいアニメーションでページをトップにスクロールすることで実現されます。たとえば、ページのスクロール中に、ユーザーが下にスクロールして戻りたいと思うことがありますが、それは不可能です。画面が途切れるだけですが、一番上に到達するまでアニメーションが続きます。

ユーザーがスクロールしようとした場合にアニメーションを停止したいので、次のコードを書きました。

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

このコードには問題があります。animate() はスクロールとしてカウントされるため、ごくわずかしか移動しないだけで停止します。

オプションとしてキーダウンも試しましたが、マウススクロールはキーとして登録されません。

ときにスクロール関数を呼び出す方法はありますか? ユーザー animate() ではなくスクロールですか?

Answer 1

独自のコードを記述してアニメーション値を設定し、変更がアニメーションによるものであることを示すフラグを設定することができます。

例えば：(未テスト)

var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
    scrollAnimating = true;
    E.elem.scrollTop = E.now;
    scrollAnimating = false;
};

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

同じことを行うことができます scrollLeft.

その設定を想定していることに注意してください scrollTop は再入可能呼び出しであるため、 scroll イベントが行内で発生する E.elem.scrollTop = E.now. 。再入可能でない場合 (一部のブラウザーでのみ可能である可能性があります)、イベントは次の後に発生します。 scrollAnimating に戻ります false. 。それを修正するには、リセットできます scrollAnimating の中で scroll イベント。

Answer 2

私は同じ問題とあったが、私は右jQueryのドキュメントに解決策を見つけました。アニメーションが完了したときにコールバック関数を設定することができますアニメーションの方法でプロパティがあります。

http://api.jquery.com/animate/ ＃のアニメーション・プロパティ・デュレーション・緩和-完全の

ここでは、コードは次のとおりです。

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})

Answer 3

それを考え出しました！インターネット上で周りを見た後、私は、スクロールイベントをキャッチしますMozillaとIEとOpera用Document.addEventListenerためdocument.onmousewheelと呼ばれるものを見つけます。

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})