jquery animated horizontal scroll on mouse scroll event

Question

I have been working on this animated horizontal offset for div, on mousescroll event. Here is the link for what I've done till now, could somebody see what I'm doing wrong?

The animation happens on the click action i need the same for mousescroll. 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{

        }
    });
});

There is another reference which I took the animation based on mousescroll is: http://jsfiddle.net/laksdesign/EATaU/

You need this script: https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js — Dom, Apr 15 '13 at 16:51
@Dom I believe there are dozens of scripts the user can use, correct? — What have you tried, Apr 15 '13 at 16:52
@Dom I was only asking to ensure what I wrote below was correct, not to "shoot down" your comment. Thanks — What have you tried, Apr 15 '13 at 16:53
@Evan from what I know, there are others, however, the one I provided is most widely used. But your answer is definitely valid. — Dom, Apr 15 '13 at 16:55

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

In order to capture the mousescroll event in jQuery you will need to use a plugin or some external function. I would suggest using a plugin rather than reinventing the wheel. Notice how in the reference you've provided the fiddle is using a mousewheel.js file - that's the plugin you'll need to use.

See this answer for some more information on how to use the plugin

An example plugin you could use:

BrandonAaron.com - I am not allowed to link to this site, so Google it instead.

You would use the plugin as so:

// using bind
$('#my_elem').bind('mousewheel', function(event, delta) {
    console.log(delta);
});

As the user @Dom suggested in the comment above, another widely used plugin is:

jQuery Mousewheel

edited May 23 '17 at 10:25

Community

1
1

answered Apr 15 '13 at 16:50

What have you tried

11,018
4
31
45

Thanks so much for the reply. I did try that out initially which dint seem to go in the right direction of my taught for the divs to animate. But the link below on jsfiddle is the right one which im looking for , with the animate happening horizontally with mousescroll currently it happnes to be a vertical scroll http://jsfiddle.net/laksdesign/EATaU/1/ – user2283274 Apr 16 '13 at 05:30
@user2283274 I get a 404 on that link - are you saying that it's still not functioning correctly for you? What's the issue? – What have you tried Apr 16 '13 at 11:43
Hey Evan thanks for the reply and i figured out the way to get what i had been looking for. Here is a link with the final version http://jsfiddle.net/laksdesign/kmABb/ – user2283274 Apr 17 '13 at 09:15

jquery animated horizontal scroll on mouse scroll event

1 Answers1