Jquery -非滚动div上的Scroll事件

Question

示例： http://jsbin.com/ofifiy/2/edit#preview

我尝试用不可滚动的div (绿色的)滚动div (红色的)。我的问题是，当我在绿色div上滚动时，jquery scroll()不会触发。

<div id="targetWithNoScroll" style="border:1px solid #0f0;  width:100px; height:100px;">
    scroll here = scroll the red div<br />   
  </div>

JS

$('#targetWithNoScroll').scroll(function() {
  $('body').append('No scroll <br />');
});

Answer 1

您需要将鼠标轮事件绑定到该div。不幸的是，没有原生的jQuery鼠标轮事件，所以您必须选择一个插件或自己编写它。但我建议你吃其中之一，因为这样可以节省很多时间：

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

1)加载jQuery，鼠标轮插件为这里。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2)将鼠标轮事件附加到车身上，"30“表示速度。preventDefault确保页面不会向下滚动。

$(function() {
   $("#element").mousewheel(function(event, delta) {
      this.scrollTop -= (delta * 30);
      event.preventDefault();
   });
});