Trying to fire a scroll event using jquery.mousewheel

Question

I'm having trouble triggering a scroll event using jquery.mousewheel. I want to "expand" the scroll event for the # bio-content-container to trigger when scrolling over the # bio-slider container. I am using the following code:

var lastScrollTop = 0; $("#bio-content-container").scroll(function () { var st = $(this).scrollTop(); if (st > lastScrollTop){ scroll('Down'); } else { scroll('Up'); } lastScrollTop = st; }); jQuery(function($) { $('#bio-slider-container') .bind('mousewheel', function(event, delta) { $("#bio-content-container").trigger('scroll'); return false; }); }); 

I do not want to trigger scrolling on # bio-slider-container, so I use the mouse wheel. Any help would be greatly appreciated :)

Answer 1

If I understand correctly, you want to scroll the contents of # bio-content-container when you use mousewheel over # bio-slider-container. You might want to check out the jquery.scrollTo plugin. This code works for me (without viewing your HTML):

 $(document).ready(function () { $('#bio-slider-container').bind('mousewheel', function (event, delta) { var content = $("#bio-content-container"); if (delta < 0) { content.scrollTo("+=10"); } else { content.scrollTo("-=10"); } }); });