獲取鼠標滾輪JQuery事件處理函數的方向

我試圖找出用戶在我的元素的mousewheel事件上使用綁定的「鼠標滾輪」方向。獲取鼠標滾輪JQuery事件處理函數的方向

當鼠標滑過灰色矩形時，可以在下面的代碼片段中看到事件被觸發。

HTML

<div class="rect"></div> 
<div> 
    Mousewheel event state : 
    <label class="event-state-mousewheel">Triggered !</label> 
</div>

CSS

.rect { 
    width : 200px; 
    height : 200px; 
    background-color : lightgrey; 
} 

.event-state-mousewheel { 
    color : red; 
    display : none; 
}

的JavaScript

$(function() { 
    $('.rect').on('mousewheel', function(event) { 
     $(".event-state-mousewheel").stop(true, false).fadeIn(250).fadeOut(250); 
    }); 
});

問題

我不能找到一種方式來獲得的方向。我嘗試調試事件觸發時返回的對象，但由於其中的元素數量很大，調試過於龐大。

QUESTION

是否有使用這些元件（從物體返回的）來獲得鼠標滾輪方向的公式？或者有沒有類似$("#element").on("mousewheeltop")的事件？

注意

我想盡可能不使用其他任何外部插件，只JQuery的。

來源

2015-11-25 Anwar Nairi

性質wheelDelta和細節是你所需要的，如下：

if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
    // Scroll up 
} 
else { 
    // Scroll down 
}

我已經更新了你的jsfiddle與此代碼。

而且，請注意，鼠標滾輪事件是deprecated，你應該使用輪代替。

來源

2015-11-25 16:31:40

改變'.mousewheel'到'.wheel'，警報總是返回後'down'，甚至向上滾動時。 –

@TimLewis我在這個更新的jsfiddle中看不到這種行爲？ https://jsfiddle.net/qexb1207/2/ –

嗯......你在用什麼瀏覽器？我注意到只在Firefox中「down」，但Chrome顯示正確的方向。 –

$(document).ready(function(){ 
    $('#foo').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta > 0) { 
      $(this).text('scrolling up !'); 
     } 
     else{ 
      $(this).text('scrolling down !'); 
     } 
    }); 
});

關注此：Get mouse wheel events in jQuery?

來源

2015-11-25 16:46:01 Nvan

爲什麼你除以120，然後比較0？ –

@AlanBuchanan你是對的，它不需要。我編輯 – Nvan

獲取鼠標滾輪JQuery事件處理函數的方向

回答

相關問題