jquery horizontal scroll with mousewheel

15,298

Solution 1

I just answered this question about scrolling a div horizontally, I also included some code to use the mousewheel or just grab and drag with the mouse... maybe some of that code will give you an idea?

To elaborate a bit, the mousewheel function gives you the event object and the delta.

$('#container').bind('mousewheel', function(event,delta){
 if (delta > 0) {
   // mousewheel is going up; 
 } else {
   // mousewheel is going down 
 }
});

The value of delta depends on how fast you scroll the wheel. I've seen a range from +50 to -50 if you try really hard :P

Solution 2

I used the $(window).bind approach in the comments but it wont scroll backwards, only forwards, for both up and down on the wheel.

<script>
    $(window).bind('mousewheel', function(event, delta) {
        if (delta > 0) { window.scrollBy(-80,0); 
        } else window.scrollBy(80,0) ; 
    });
</script>
Share:
15,298

Related videos on Youtube

steve
Author by

steve

Updated on June 04, 2022

Comments

  • steve
    steve almost 2 years

    I currently have a site that is a sidescroller (http://www.studioimbrue.com) and I'm trying to bind a mousewheel to scroll sideways. Currently I'm using the one found at thehorizontalway.com (called thw.js) but it doesn't seem to work in all browsers (Chrome).

    I'm trying to get this one to work: http://brandonaaron.net/code/mousewheel/docs , to simply scroll the whole window, nothing else. There is very limited documentation so I can't figure it out. Any help is appreciated.

  • steve
    steve almost 14 years
    I see what you're saying, but I don't understand the actual "scroll" part. In your other post I see this.scrollLeft -= (delta * 30); but I can't get that to work in mine. I want the whole window to scroll as opposed to just a div, so I tried changing ('#container') to (window).
  • steve
    steve almost 14 years
    I'm not sure if this is correct, but I got it working in other browsers with this: $(window).bind('mousewheel', function(event,delta){ if (delta > 0) { window.scrollBy(-80,0); } else window.scrollBy(80,0) ; }); But it seems pretty buggy in Chrome...
  • steve
    steve almost 14 years
    I think it was just my computer at that moment. All is well, thank you :)