CODEWITHSUNDEEP
jquerycsshtmlhorizontal-scrollingmousewheel
user2283274
user2283274

Reputation: 3

jquery animated horizontal scroll on mouse scroll event

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/

Upvotes: 0

Views: 1995

Answers (1)

What have you tried
What have you tried

Reputation: 11148

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:

Upvotes: 1

Related Questions