我可以判断滚动条是否已经处理了鼠标滚轮事件吗？答案

【问题标题】：Can I tell whether a mousewheel event has already been handled by a scroll bar?我可以判断滚动条是否已经处理了鼠标滚轮事件吗？
【发布时间】：2012-12-19 10:08:57
【问题描述】：

这是我想要完成的：

我有一个页面上有一个水平滚动区域，我希望用户能够通过使用鼠标滚轮事件来左右滚动（https://github.com/brandonaaron/jquery-mousewheel/ blob/master/jquery.mousewheel.js)——所以我正在监听水平滚动区域上的鼠标滚轮事件，如果我看到有任何 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/

【问题讨论】：

您能否在 JSFiddle 上提供一个演示，说明您想要实现的目标？我只想 100% 确定我理解您的问题。
@amustill jsfiddle.net/jTskZ -- 请注意，当我滚动红色/黄色部分时，它也会滚动蓝色部分。
@ShyGuy 如果您绑定到mousewheel 事件，您的处理程序将在“默认操作”之前执行。只需在处理程序中调用 e.preventDefault(); 即可阻止该默认操作。
@ŠimeVidas 但默认操作已经发生在#vertical div 上（向上和向下滚动），然后冒泡到 .horizontal div。我想看看里面有没有垂直滚动，如果有，不要水平滚动。

标签： javascript jquery mousewheel

【解决方案1】：

考虑一下：

$( '.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 元素上。如果不是，则进行水平滚动。

【讨论】：

这适用于这个例子，但不完全是我的想法——我希望有更通用的东西，我不一定知道水平滚动区域内的哪些元素具有垂直滚动内容。
@ShyGuy 你可以有一个通用的'scrollable' 类来处理页面上滚动的内容。然后您将检查光标下方是否有这样的可滚动元素，如果有，请不要执行滚动命令。您的hasAlreadyScrolledSomething 想法的问题在于，在浏览器进行本机滚动之后没有触发事件，因此无法在该事件之后直接连接回调。