檢測向上滾動無法正常工作

Question

我試圖在向上滾動的檢測並不順利

$(window).bind('DOMMouseScroll scroll mousewheel', function(event) { 

    if (event.originalEvent.wheelDelta >= 0) { 
      console.log('scroll up'); 
     }else { 
      console.log('scroll down'); 
    }); 

}); 

這裏使用此代碼來獲得滾動方向問題的結果enter image description here它的屏幕截圖顯示向上滾動然後向下滾動但我沒有向下滾動

Answer 1

你有太多的事件綁定。

試試這段代碼，唯一的區別是我在div上使用它。

$('div').bind('mousewheel', function(event) { 

    if (event.originalEvent.wheelDelta >= 0) { 
      console.log('scroll up'); 
     }else { 
      console.log('scroll down'); 
    } 

}); 

這裏是一個工作JS提琴：

https://jsfiddle.net/r1sjv2tv/

編輯：以上回答的作品，儘管使用滾輪滾動時纔可用。 但是，窗口也可以用鼠標滾動。如果你也處理它，它會變得更復雜一些。

我做了一個解決方案，它監聽onscroll事件，並簡單地將當前的scrolltop位置與最後一個scrolltop位置進行比較，以確定滾動的方向。

$('div').bind('scroll', function(event) { 

    if ($(this).scrollTop() < $(this).data('last-scroll')) { 
    console.log('scroll up'); 
    } else { 
    console.log('scroll down'); 
    } 

    $(this).data('last-scroll',$(this).scrollTop()); 
}); 

這可以獨立於原始事件觸發器工作。

請參閱小提琴：

https://jsfiddle.net/r1sjv2tv/2/