After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am using the jquery mousewheel plugin by Brandon Aaron along with a script that updates the top value to navigate through .js-slide elements based on scrolling.
In my fiddle link, you can see that it jumps between slides but restricts access to content outside #scroller. I want the mousewheel behavior to function normally. I have a live URL where I intend to implement this effect, if that information would be helpful.
Here is an outline of the structure and desired effect:
I attempted to confine my script to $('#scroller').mouseover(function(){/*my script*/}); however, this did not resolve the issue. The mousewheel started correctly, transitioned into jump mode effectively, but failed to return to normal once exiting the #scroller div.
The current version of my script is as follows:
jQuery(document).ready(function($) {
var slide = $('.js-slide');
var sectionHeight = $(window).height();
var slideHeight = $(slide).height();
var scrollingScreen = false;
$('#scroller').mouseover(function(){
$(slide).mousewheel(function(event, delta) {
if ( !scrollingScreen ) {
scrollingScreen = true;
var top = $("body").scrollTop() || $("html").scrollTop();
var candidates = $(slide).filter(function() {
if ( delta < 0 )
return $(this).offset().top > top + (1);
else
return $(this).offset().top < top - (1);
});
if ( candidates.length > 0 ) {
if ( delta < 0 )
top = candidates.first().offset().top;
else if ( delta > 0 )
top = candidates.last().offset().top;
}
$("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
scrollingScreen = false;
});
}
return false;
});
});
});
Any help or guidance on achieving this functionality would be immensely appreciated. Thank you!