2012-03-31 4 views
31

をスクロールアップ:
Differentiate between scroll up/down in jquery?可能性の重複ダウンユーザーのスクロールを検出またはjQueryの

をそれがあれば、ユーザーのスクロールを上下検出またはスクロールアップすることは可能ですか?

例:jQueryのでアップ/ダウンスクロールを区別するために

$(window).scroll(function(){ 

    // IF USER SCROLL DOWN 
      DO ACTION 

    // IF USER SCROLL UP 
      DO ANOTHER ACTION 

}); 

おかげ

答えて

46

、あなたが使用できます。

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
$('#yourDiv').bind(mousewheelevt, function(e){ 

    var evt = window.event || e //equalize event object  
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible    
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF 

    if(delta > 0) { 
     //scroll up 
    } 
    else{ 
     //scroll down 
    } 
}); 

をこの方法でもoverflow:hiddenを持っているのdivで動作します。

FireFox、IE、Chromeで正常にテストされました。

+0

これは非常にうまく動作します。単純な '' 'e.preventDefault()' ''は、セクションのスクロールで何かをしたいだけで、実際にはスクロールしない場合は、スクロールを親要素(ページのような)に移動することも許可しません。要素またはその親 –

+0

オーバーフローが隠されたアップルのトラックパッドまたはマジックマウスでこれに関するアイデアはありますか? http://stackoverflow.com/q/32512924/770127 – ryanve

+1

これはもう実行しないでください。ブラウザのスニッフィングは、かなりの間、偉大なプラクティスではありませんでした。今使っている方が良いクロスブラウザイベントがあります。 http://stackoverflow.com/a/33334461/3168107 – Shikkediel