1

ユーザーが5つの数字、1〜5のメニューを表示する機能を作成しようとしています。1=最も遅い、5 =最も速い、誰かがこれらの数字の1つをクリックすると、ページが自動的にスクロールし始め、人はページをスクロールする必要はありません。私が抱えている問題は、その人がまだマウスホイールにアクセスできるようにしたいということですが、ページのアニメーション中にマウスホイールを使用すると、ページが下に移動し、その後、元の場所に戻ります。アニメーションは続行されますが、下にスクロールしたり上に戻ったりして、マウスホイールでスクロールした新しい位置からアニメーションを作成することはできません。今私はそれを持っているので、スクロール中にページをクリックすると停止しますが、それを最終的なスクリプトに含めていません、何か助けはありますか？ありがとう！

$('html,body').animate({scrollTop: $(target).offset().top},430000) 

$('html,body').click(function(){
  $('html,body').stop()
})
4

1 に答える 1

1

イベントを利用してこれを達成しようとしましたscrollが、残念ながら、このイベントはアニメーションの実行中に繰り返し呼び出されました（もっとよく知っているはずです）。

スクロールイベントに対してより敏感で、とを区別できるjQuery Mousewheelプラグインを使用することになったので、次のように書くことができます。scrollmousewheel

$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

http://jsfiddle.net/Yuw9R/1/

ホイールで上下にスクロールすると、自動スクロールが停止します。上/下矢印を再度有効にするコードを追加することもできます。これを行うために追加できるコードは次のとおりです。

$(window).bind("keydown", function(event) {
    var keyCode = event.which;
    /* up, down, left, right, or page up or page down */
    if (keyCode === 33 || keyCode == 34 || (keyCode >= 37 && keyCode <= 40)) {
        $("html, body").stop();
    }
});

プラグインを使用したくない場合は、この関連スレッドを確認してください。

于 2011-01-03T05:37:57.337 に答える