我能否告訴滾動條是否已經處理了滾輪事件？

這是我想要實現的：我能否告訴滾動條是否已經處理了滾輪事件？

我有一個頁面，其上有一個水平滾動區域，我希望用戶能夠使用鼠標滾輪事件（https： //github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js） - 所以我在我的水平滾動區域偵聽mousewheel事件，並在滾動時看到有deltaY。

但是，如果在水平滾動條內有一個組件，我希望它垂直滾動，而不是向上滾動並導致水平滾動條上的滾動。

因此，假如簡化的標記看起來是這樣的 - 在.horizontal提供了一個薄的水平含量#vertical是垂直滾動的：

<div class="horizontal"> 
    <div id="noscroll"></div> 
    <div id="vertical"></div> 
</div>

而且還有一些JavaScript，看起來是這樣的：

$('body').on('.horizontal', 'mousewheel', function(e){ 
    // check whether e has already triggered a scroll on an element 
    if(hasAlreadyScrolledSomething(e)){ // how can I implement hasAlreadyScrolledSomething 
    e.stopPropagation(); 
    } else { 
    // scroll the horizontal scroll bar using deltaY 
    // this part is already implemented 
    } 
});

有沒有什麼事件的鼠標輪，我可以看看找出它？請記住，#vertical內可能有東西，所以e.target可能不是#vertical，但內部有些東西。

編輯：這裏是一些示例代碼的代碼來查看概念。 http://jsfiddle.net/jTskZ/

來源

2013-01-04 Paul

你能提供一個關於JSFiddle的演示嗎？我只是想100％確定我理解你的問題。 – amustill

@amustill http://jsfiddle.net/jTskZ/ - 注意當我滾動紅色/黃色部分時，它也會滾動藍色部分。 – Paul

@ShyGuy如果綁定到'mousewheel'事件，那麼您的處理程序將在*「default action」之前執行*。只需在你的處理程序中調用'e.preventDefault（）;'來防止這個默認操作。 –

考慮一下：

$('.horizontal').on('mousewheel', function (e, delta, deltaX, deltaY) { 
    if (deltaY && !$(e.target).closest('#vertical')[0]) { 
     this.scrollLeft -= (deltaY * 30); 
    } 
});

現場演示：http://jsfiddle.net/jTskZ/1/

所以，在處理程序中，你檢查，如果鼠標光標位於在的#vertical元素。如果不是，則執行水平滾動。

來源

2013-01-05 03:50:20

這適用於這個例子，但並不完全是我想到的 - 我希望有更通用的東西，我不一定知道水平滾動區域內的哪些元素具有垂直滾動內容。 – Paul

@ShyGuy你可以爲你的頁面上滾動的東西設置一個通用的「可滾動」類。然後你會檢查光標下面是否有可滾動的元素，如果有，請不要執行滾動命令。你的'hasAlreadyScrolledSomething'思想的問題是在瀏覽器沒有完成他的本地滾動之後沒有事件觸發*，因此在事件之後不能直接掛鉤回調。 –

我能否告訴滾動條是否已經處理了滾輪事件？

回答

相關問題