Search code examples
javascriptjqueryjquery-eventspreventdefault

Event for scroll [up + down] and [left + right] separately?


I want to to make it so when the user scrolls up / down it goes left / right.

I am using this jquery mousewheel plugin (i'm open to others that achieve the same).

$("body").mousewheel(function(event, delta, deltaX, deltaY) {
    event.preventDefault();
    this.scrollLeft -= (delta * 30);
});

The preventDefault() is triggering for both up / down and left / right. It turns out that the functionality for up / down works great but this code makes the left / right horrible its scrolling very choppy. I would like to only preventDefault() for up / down.


Solution

  • Scroll Page Horizontally With Mouse Wheel

    Add Deps:

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
    

    Add this script:

    $(function() {
    
       $("body").mousewheel(function(event, delta) {
    
          this.scrollLeft -= (delta * 30);
    
          event.preventDefault();
    
       });
    
    });
    

    Demo