Question

这就是我想要完成的事情：

我有一个页面，其上有一个水平滚动区域，我希望用户能够使用鼠标滚轮事件向左和向右滚动（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/

Answer 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元素。如果不是，则进行水平滚动。

我可以判断滚轮条是否已处理鼠标滚轮事件？

1 个答案: