2011-01-03 11 views
1

1〜5の5つの数字を持つメニューを表示する機能を作成しようとしています。1 =遅く、5 =最速これらの番号の1つをクリックすると、ページがスクロールしてページをスクロールする必要がなくなります。私が抱えている問題は、人が自分のマウスホイールにまだアクセスできるようにしたいのですが、ページがアニメーション化されている間にマウスホイールを使用すると、ページが動きにくくなり、それはアニメートを続けていますが、スクロールダウンやバックアップをしてからマウスホイールでスクロールした新しい位置からアニメートすることはできません。今、私はそれを持っているので、スクロール中にページをクリックすると停止しますが、最終的なスクリプトには何も表示されません。ありがとう!jquery:自動スクロールページですが、マウスホイールを使用してもスクロールが可能です

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

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

答えて

1

私はscrollイベントにタップすることでこれを実現しようとしましたが、アニメーションが実行されていたとき、ああ、このイベントは(良く知られている必要があります)繰り返し呼び出されました。

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

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

がアップスクロールまたはダウン:

は、私はあなたがこのような何かを書くことができるように、イベントをスクロールするとscrollmousewheelを区別することができ、より高感度であるjQuery Mousewheel Pluginを使用して終了しましたホイールで自動スクロールを停止する必要があります。上向き/下向き矢印を再び有効にするコードを追加することもできます。

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

あなたは、プラグイン、check out this related threadを使用しない場合:ここではあなたがそれを行うために追加できるコードです。