7

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

i try to scroll a div (red one) with a non scrollable div (green one). My problem is, when i scroll on the green div, the 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 />');
});
user970727
  • 1,947
  • 4
  • 22
  • 28
  • 4
    Why would you expect a scroll event to fire on a div which has no ability to scroll? This seems correct behaviour to me. – Rory McCrossan Dec 06 '11 at 09:23
  • Please explain the logic here. You apply a listener to something that does not fire (scrolling in a non-scrollable div), so you can output "nothing happened" in the callback? That does not make any sense. – OptimusCrime Dec 06 '11 at 10:10

1 Answers1

6

You need to bind the mousewheel event to that div. Unfortunately there is no native jQuery mousewheel event, so you have to pick a plugin or write it yourself. But I would recommend taking one of these as it saves you a lot of time:

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

1) Load jQuery and the Mouse Wheel plugin Mouse Wheel plugin is 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) Attach mousewheel event to body The "30" represents speed. preventDefault ensures the page won't scroll down.

$(function() {
   $("#element").mousewheel(function(event, delta) {
      this.scrollTop -= (delta * 30);
      event.preventDefault();
   });
});
Manticore
  • 1,284
  • 16
  • 38