Jqueryの.animate（）は、ユーザーが手動でスクロールしたときにスクロールを停止しますか？

Question

クリックしたときにページセクションを表示にスクロールするスニペットを設定しましたが、アニメーションの途中でスクロールしたい場合、スクロールがちょっとぎこちないという問題がありました。

$("section").click(function(e) { 
     $('html,body').animate({ scrollTop: $(this).position().top }, 'slow'); 
     return false; 
    }); 

私は手動でユーザーがスクロールした場合jqueryのアニメーションをどのように停止することができますか？

Answer 1

変更これまであなたの関数：

var page = $("html, body"); 

$("section").click(function(e) { 

    page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

    page.animate({ scrollTop: $(this).position().top }, 'slow', function(){ 
     page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
    }); 

    return false; 
}); 

これは以下となります。

• ストップアニメーション場合のみ、アニメーション中に手動でユーザーがスクロール（ ）
• は通常のjQueryのアニメーションを妨げない、他の回答のようにいくつかのでしょう

---

いくつかの追加情報：なぜあなたはこれらのイベントの全てに結合されている

？ 「スクロールマウスホイールなど...」

スクロールイベントにはさまざまな種類があります。マウス、キーボード、タッチスクリーンなどを使用して下にスクロールすることができます。これで、すべてをキャッチします。

var page = $("html, body");はどのような用途ですか？どこでも$("html, body")を使用できませんか？

同じセレクタを複数回使用する場合は、variableにキャッシュすることをお勧めします。書き込み/使用が容易になり、毎回セレクタを再計算するよりもパフォーマンスが向上します。

.animate()と.stop()の詳細はどこにありますか？

.animate()と.stop()のjQueryドキュメントを読むことができます。この原則には.stop()が働くので、animation queue'sについて読むことをお勧めします。

Answer 2

$("your selector").scroll(function(){ 
$('html,body').stop(); 
}); 

参照stop

Answer 3

はまた、要素のキューから他のすべてのアニメーションを削除しますが、それは現在のスクロールアニメーションの最後に「ジャンプ」ではないだろう。この

$('html,body').scroll(function() { 
    $(this).stop(true, false); 
}); 

を試してみてください。

Answer 4

私はここでユーザーイベント

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) { 
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") { 
    $("html,body").stop(); 
    } 
}); 

を検出することによってそれを行うだろうa good tutorialです。