Grow your CSS skills. Land your dream job.

Last updated on:

Scroll Page Horizontally With Mouse Wheel

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

<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>

2) Attach mousewheel event to body

The "30" represents speed. preventDefault ensures the page won't scroll down.

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

View Demo

Comments

  1. Permalink to comment#

    I look for it long time, thank you very much.

    • ezaz
      Permalink to comment#

      i want to use the same property for vertical scroll but i dont want the vertical scroll bar to appear….anyone to help??

    • Clive Cooper
      Permalink to comment#

      @ezaz To achieve that put the following style on your body element:
      overflow: hidden;

    • Amir
      Permalink to comment#

      Or you could use overflow-y:hidden for specify the vertical

  2. Permalink to comment#

    Hey
    Thanks for the post!
    It seems works in Firefox but not in Chrome.
    Any idea to make it run in Chrome?
    Thanks.

  3. Permalink to comment#

    This code doesnt work for me. I’m using also two scripts for automatic scrolling with anchors. Does anybody know how to fix it?

    <script src="/js/jquery-1.4.4.min.js” type=”text/javascript”>
    <script src="/js/jquery.localscroll-min.js” type=”text/javascript”>
    <script src="/js/jquery.scrollTo-min.js” type=”text/javascript”>
    <script src="/js/jquery.mousewheel.min.js” type=”text/javascript”>

    $(document).ready(function () {
    $.localScroll.defaults.axis = ‘x';
    $.localScroll();

    $(function() {

    $(“body”).mousewheel(function(event, delta) {

    this.scrollLeft -= (delta * 30);

    event.preventDefault();

    });

    });

  4. Permalink to comment#

    I tried this and worked:

    $(window).mousewheel(function(event, delta) {
    event.preventDefault();
    var scroll = $(window).scrollLeft();
    $(window).scrollLeft(scroll – (delta * 30));
    });

  5. Permalink to comment#

    Hi there, i got a problem and need your help:

    I have on my page 4 absolutely positioned div’s. How do I use this function all the div’s scroll?
    Currently, I can scroll only the top div
    Here is the page: jb.existenzgruender-in.com

    • epoy
      Permalink to comment#

      GO to ur Index and put scrooling=”yes” :) easy as that dude!

  6. Permalink to comment#

    Hi,
    Nice post!
    I am looking for a function the create a zoom effect ,when your scrolling with your mouse. Not horizontal or vertical but in the “Z Dimension”. Someone any idees?

  7. Candice

    Exactly what I was looking for!
    It works perfectly on Safari, but not on Firefox for me. At least not on 3.6 OS, any one know? The downloadable example doesn’t work either.

  8. Got it working on Firefox too. I used $(“body”) to refer to the container and it worked perfectly on Chrome. On Firefox, for some reason, the selector must be $(“html”). So, I just combined both to $(“body, html”) and now it works. See the snippet below:

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

    I hope this works, and happy coding ..!
    — Kimmo

  9. Great one Chris, keep the new snippets rolling.

  10. Absolutely perfect! Finally the solution for horizontal scrolling in all (modern) browsers!

    Thank you so much! :-)

  11. Permalink to comment#

    Its the solution which i want
    It will help in my horizontal scroll portfolio

  12. Tomas Danilevicius
    Permalink to comment#

    Kimmo, actually this is not working in Safari 5.1 on Windows. And I haven’t found a solution yet.

  13. Sam
    Permalink to comment#

    Hi, how to make it work for chosen div only instead whole body, or just for chosen tag? For example for div with id or table.

  14. nykeri
    Permalink to comment#

    um sorry but this does not work

  15. Thank you, this fix my problem with horizontal scrolling when overflow: hidden, scrolling on defalut work without mousewheel in FireFox, but not work on other bowser, with your tricks work nice on Chrome etc… Thank you again.

  16. Permalink to comment#

    Nope doesn’t work on firefox 8 using $(“html, body”)

    overflow: hidden refers to hiding or scrolling contents too big for its container

  17. Permalink to comment#

    Add the star selector *.

    $(function() {
                            $("html, body, *").mousewheel(function(event, delta) {
                                    this.scrollLeft -= (delta * 30);
    								this.scrollRight -= (delta * 30);
                                    event.preventDefault();
                            });
                    });
    
    
  18. Tricia
    Permalink to comment#

    mousewheel plugin is no longer available to download

    • !amotio
      Permalink to comment#

      Yes it is … u need to go here “https://github.com/brandonaaron/jquery-mousewheel/downloads” … ;) i hope it helps :)

  19. Soo.. anyone found a solution for this to work on Safari? Cause this isn’t viable solution is it doesnt work on Safari which is a modern browser.

    • Pardon my grammar, I guess it’s from the sleep deprivation :))

      Soo.. anyone found a solution for this to work on Safari? Cause this isn’t viable solution since it doesnt work on Safari, which is an important browser.

  20. Gary
    Permalink to comment#

    Can i do this to a div? It works fine but i would do the scrolling only for a div not for the whole page. Please help :)

  21. Permalink to comment#

    just replace html,body with the div you want to scroll

    		
    $(function() {
    			$("#gallery").mousewheel(function(event, delta) {
    				this.scrollLeft -= (delta * 30);
    				event.preventDefault();
    			});
    		});
    
  22. fox
    Permalink to comment#

    not working with the latest firefox 10.0.2

  23. Thanks so much, I am looking for a way to implement my design.

  24. ruth
    Permalink to comment#

    brand new to code and i want to put this in my blog/site – where do i put it?
    :/
    thanks!

  25. James C
    Permalink to comment#

    Hi, the code works like a charm!

    But, has anyone found a solution to make this functionallity work on an IPad, IPhone or simillar touch devices?

    Cheers!

  26. oliver t
    Permalink to comment#

    Hello, that what just what i was looking for, but i’m pretty new in html, where should i put the code ?

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

    • Jason

      Hey, if you are new to HTML chances are this is way to advanced for you. Especially considering this is jquery not HTML.

  27. Mike

    Works great! Thanks for the code!

  28. $(“body,html”) Works like a Charm in All browsers Latest FF, Safari, Chrome , IE 7,8,9 (win7)

  29. fox
    Permalink to comment#

    not working on firefox 13.0.1 on WINx64

  30. Great Stuff, very useful for a side-project of mine (photography website) – so I also blogged about it here: http://bit.ly/MD6NHK

  31. Ardi H
    Permalink to comment#

    Hi

    this is working almost perfect – spotted a little glitch tho. Seems like when your content does not fill the entire height of the page (and why should it, when you want horizontal scrolling), then theres a certain part of the page at the bottom, where the scroll fails, when you scroll all the way to the other end – in other words, when you scroll away from your original viewport, then the scroll stops working on that bottom part of the page that does not have content.

    Could it be something about viewport? Even when HTML and Body both have height: 100% in the initial view, maybe the 100% fails when you scroll away from the “first display”?

    Tested on OS X Chrome, Safari latest ver’s.

    • Tyler
      Permalink to comment#

      Indeed a problem. I’m experiencing it too using CSS3’s multi-column layout.

      Problem being columns don’t fill top to bottom, so once you leave the first “viewport” (scroll right) where the heights are truly 100%, the site will stop scrolling if you aren’t hovered over text in a column.

      This also caused a problem with backgrounds past the initial viewport. But that’s unrelated to the scrolling (just the current implementation of multi-column).

    • Mayhem
      Permalink to comment#

      I’m also experiencing this problem related to css3 multi column layout. It seems scrolling with the scrollwheel doesn’t work when the cursor has a position that is between the columns. I’ve noticed this problem in the current Chrome (28). The current firefox (22) doesn’t have this problem.

      I’m currently investigating why this problem doesn’t occur with the jQuery nicescroll plugin. (Which i can’t use for other reasons)

      Has anyone solved this already?

  32. desaturated
    Permalink to comment#

    Doesnt work on OSX safari and chrome. Used all the above fix but no luck.

  33. Permalink to comment#

    Hi there — I was wondering if there is a way to ‘switch off’ this functionality (having first activated it).
    In my case, I have a page that scrolls L > R, and a long hidden div that I’m showing on the same page with jquery. I’d like the horizontal scrolling to be temporarily deactivated when I show that longer div, and then reactivated when I hide it again.

    Thanks for any pointers!

    • Thomas Bormans
      Permalink to comment#

      I don’t know if it is the best option, but it’s working for me. When you show your div, load the script for “normal scrolling”. It’s the same script as horizontal scrolling, you just have to change “this.scrollLeft -= (delta * 30);” into “this.scrollTop -= (delta * 30);”.

  34. Noah Gelman
    Permalink to comment#

    Hey Chris, I wanted to give you a heads up that this snippet is no longer functional. You’re linking to the most current javascript, but the mousewheel plugin is old.

    Perhaps for future snippets, note the current versions of the various scripts? (I recently ran into the same problem of a website breaking because my old js wasn’t working with the newest jquery version)

    Thanks for the awesome site!

    • Works great for me in Chrome 21 as of the day of this comment. The mousewheel plugin is the latest version as well.

  35. Permalink to comment#

    Thank you for making this possible and very easy for a newbie like me. The plug-in works perfectly in my website, the only problem is when accessing the page using a mac with its horizontal scroll pad (by dragging two fingers horizontally) it seem a bit weird when one has to scroll vertical to move something horizontal. Is there a way to make the horizontal scroll works as well?

  36. Jesper
    Permalink to comment#

    preventDefault did it! Many thanks!

  37. Ricardo
    Permalink to comment#

    Does anyone know how to disable the plugin just to the touchpads?
    When navigating with touchpad some conflict between horizontal and vertical movement occur.
    If navigating with touchpad I don’t find this plugin useful at all, so it would be just perfect to disable it, when specifically navigating this way, working just for mousewheel.
    Can anyone help me?

  38. Jace
    Permalink to comment#

    Hi guys I found a fix for Chrome.

    You have to make sure in your CSS that you don’t have anything like:

    overflow-y: hidden;
    overflow-x: auto;

    I suppose if you don’t have any content running along the Y-axis, the plugin does it for you.

  39. Permalink to comment#

    Just launched a completely horizontal site and used some info from here to help..at least at early stages… The code morphed a bit. Thanks.
    I did manage to get the page and sub pages within it completely growing horizontally to the left using inline-block, white-space:none and font-size:0.

    Check it out http://www.longbay.co.nz
    Cheers

    • Maak Bow
      Permalink to comment#

      And… Um yeah, 12 months later and a new marketing manager decides to rebuild the entire site into a templated wordpress site. We worked hard to make a very usable horizontal site that pleased the clients and branding agency and had a great umbraco CMS customise for a modular horizontal aproach.

  40. To all who got issues – Try this:

    function mouseWheel(event) {
    var delta = 0;
    if ( ! event) event = window.event;
    if (event.wheelDelta)
    delta = event.wheelDelta / 120;
    else if (event.detail)
    delta = -event.detail/3;
    if (delta)
    jQuery(window).scrollLeft(jQuery(window).scrollLeft()-Math.round(delta*100));
    }
    if (window.addEventListener)
    window.addEventListener(‘DOMMouseScroll’, mouseWheel, false);
    window.onmousewheel = document.onmousewheel = mouseWheel;

    To Chris – You already know – But great Tricks you got. Thank you.

  41. Ellie
    Permalink to comment#

    When I want to scroll horizontally in Chrome, all I do is hold down the shift key while using the mouse scroll wheel. Down moves to the right, up moves back.

  42. Camila
    Permalink to comment#

    I am trying to get this to work in a single div, or rather when (top > 1400). Essentially, scroll down, meet the div in question- then scroll horizontally.
    However, this either causes the elements higher up on the page to get covered by a right margin on scroll down, or disables scrolling completely.

    I have been trying

    $(function(){
        $("#art").wrapInner("");
        $("#info").wrap("");
       $("#info").mousewheel(function(event, delta) {
         if (top > 1400) {
         
          this.scrollLeft += (delta * 30);
          event.preventDefault();}
          
          else {
           
            event.Default();}
        });   
      });
    

    I know this is messy I have been fumbling around trying to get this to work a couple different ways.

  43. Permalink to comment#

    this is awesome thanks

  44. Mehdi
    Permalink to comment#

    i think it’s not usual to use for website
    tanks

  45. Spencer Carstens

    I got you guys –

    This works on all of the latest browsers (desktop at least) :

        $(function() {
            $('body').bind('mousewheel', function(event, delta, deltaX, deltaY) {
                var scroll = parseInt( $(window).scrollLeft() );
                $('html, body').scrollLeft( scroll - ( deltaY * 5 ) );
                event.preventDefault();
            });
        });
    
  46. nathan
    Permalink to comment#

    Even your demo doesn’t work.

    • Works for me. I’m going to bury this for now. If you can provide some data on where/how it doesn’t work I’ll un-bury.

    • Spencer Carstens
      Permalink to comment#

      Chris’s code doesn’t work on Firefox. I assume this is what you are referring too?

      My code above works on all browsers.

  47. Army
    Permalink to comment#

    Hi,

    This is awesome, thanks.
    However, the link to the plugin at the top is broken. You might want to try to link to the GitHub project at https://github.com/brandonaaron/jquery-mousewheel

    Hope this helps.

  48. philipp
    Permalink to comment#

    hi there,

    i got an issue while using this snippet.
    http://thomas-boecker.net/ — in the gaps between the images (margin) the script won’t work and nothing happens if i scroll.

    doey anybody has an idea how i can fix this?

    thanks alot!

    • Army
      Permalink to comment#

      Hi phillipp,

      One solution is to use padding-right:25px; instead of margin.

      Hope this helps.

      A

  49. philipp
    Permalink to comment#

    crazy. just before i asked here, i already tried padding and it didn’t work.
    thanks alot, now it’s working! digital voodoo!

  50. philipp
    Permalink to comment#

    ahh, it’s me again. help.

    switching margin to padding worked in chrome, but in safari the blank spots are still dead zone for the script :(.

    • Army
      Permalink to comment#

      Have you tried binding the script to your #media wrapper div?
      I.e.
      $(‘#media’).scrollLeft( scroll – ( deltaY * 100 ) );

  51. Naveed Ahmad
    Permalink to comment#

    Very nice. Thanks

  52. Tom
    Permalink to comment#

    Hi, guys. Does anyone know how to make a smooth horizontal scroll using mouse wheel?

  53. Permalink to comment#

    nice trick i love this site!

  54. JS Novice
    Permalink to comment#

    What am I missing here?

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript' src='/js/jquery.mousewheel.js'></script>
    <script type='text/javascript'>
             $(function() {
        $('body').bind('mousewheel', function(event, delta, deltaX, deltaY) {
            var scroll = parseInt( $(window).scrollLeft() );
            $('html, body').scrollLeft( scroll - ( deltaY * 5 ) );
            event.preventDefault();
        });
    });
    </script>
    

    Firebug Console:

    ReferenceError: jQuery is not defined (jquery.mousewheel.js, line 22)
    ReferenceError: $ is not defined (index.html)

    tested in both FF and Chrome

    Any and all help is appreciated!

  55. mei
    Permalink to comment#

    the example is not working

    • Works for me, so I’m going to bury this until you can provide more information on how exactly it doesn’t work. Browser/platform/version + screencast would be ideal.

  56. Sonics
    Permalink to comment#

    Hi, Thanks for the script but it is not working on Firefox. I am using a 24+ version of Firefox. The script works fine on chrome but not on Firefox with mouse scrolling but the keyboard arrows work to move the page left-right.

  57. tswaehn
    Permalink to comment#

    Sorry mate, but nothing scrolls in firefox 17.0.9. Any suggestions?

  58. Martyna
    Permalink to comment#

    Hi guys, is there any way to make it work with overflow-x ? I want my gallery to scroll both with my custom scrollbar and with mouse wheel and i’m trying to make it work like for days with no result..

  59. MoonMan
    Permalink to comment#

    Hi Guys,

    Found a way to make it work on both Windows and Mac OS X, just by changing the ’30’ value to ‘event.deltaFactor’ like this:

    this.scrollLeft -= (delta * event.deltaFactor);
    
  60. adarsh
    Permalink to comment#

    works only in webkit browser does not work in firefox

  61. Stefan
    Permalink to comment#

    I think this is not an optimal solution, because if you have a trackpad and scroll from left to right or right to left, the scrolling is not smooth. It seems to be a solution for making a vertical scrolling movement a horizontal one, but it creates problems if you scroll horizontally…

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".