Jquery - 不可滚动 div 上的滚动事件

example: http://jsbin.com/ofiy/2/edit#preview

我尝试用不可滚动的div（绿色的）滚动一个div（红色的）。 我的问题是，当我在绿色 div 上滚动时，jqueryscroll()不着火。

HTML

<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 />');
});

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

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

1) 加载 jQuery 和鼠标滚轮插件 鼠标滚轮插件是here.

<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）将鼠标滚轮事件附加到body “30”代表速度。 PreventDefault 确保页面不会向下滚动。

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