44

クリックしたときにページセクションをスクロールして表示するスニペットを設定しました。問題は、ユーザーがアニメーションの途中でスクロールしたい場合、スクロールが少し途切れることです。

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

ユーザーが手動でスクロールした場合、jquery アニメーションを停止するにはどうすればよいですか?

4

4 に答える 4

121

関数を次のように変更します。

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")どこでも使えないの？

同じセレクターを複数回使用する場合は、変数にキャッシュすることをお勧めします。プログラムが毎回セレクターを再計算するよりも、記述/使用が簡単になり、パフォーマンスが向上します。

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

.animate()および.stop()の jQuery ドキュメントを読むことができます。この原則に基づいて動作するため、アニメーション キューについても読むことをお勧めします。.stop()

于 2013-08-26T13:43:41.627 に答える
6

ユーザーイベントを検出することでそれを行います

$('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();
  }
});

ここに良いチュートリアルがあります。

于 2013-08-26T13:48:19.863 に答える
1 
$("your selector").scroll(function(){
 $('html,body').stop();
});

基準停止

于 2013-08-26T13:43:16.607 に答える
0

これを試して

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

また、要素のキューから他のすべてのアニメーションを削除しますが、現在のスクロール アニメーションの最後に「ジャンプ」することはありません。

于 2013-08-26T13:45:36.223 に答える