I've been experimenting with an animated horizontal offset for a div element triggered by the mousescroll event. You can check out my progress so far by following this link - could someone please take a look and help me identify any issues?
Currently, the animation is activated on click action but I would like it to be triggered by mousescroll instead. http://jsfiddle.net/laksdesign/WvRR6/
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
});
$('body').bind('mousewheel', function(scroll){
if(scroll.originalEvent.wheelDelta /120 > 0) {
scroll.preventDefault();
$('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
} else{
}
});
});
I found inspiration from another example that uses mousescroll-based animations: http://jsfiddle.net/laksdesign/EATaU/