JQuery - scroll event on scrollable div

Question

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

I am trying to scroll a div (red) using a scrollable div (green). My problem is that when I look through the green div, jquery scroll() does not fire.

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

Answer 1

You need to bind the mousewheel event to this div. Unfortunately, there is no native jQuery mousewheel event, so you need to select a plugin or write it yourself. But I would recommend taking one of them, since it saves you a lot of time:

http://brandonaaron.net/code/mousewheel/demos/

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

http://www.ogonek.net/mousewheel/jquery-demo.html