3

这是我要完成的工作：

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

但是，如果水平滚动条中有一个组件，我希望它垂直滚动，而不是冒泡并在水平滚动条上滚动。

所以假设简化的标记看起来像这样——其中 .horizo​​ntal 提供了一个薄的水平内容，而 #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/

4

1 回答 1

0

考虑一下：

$( '.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-05T03:50:20.090 回答