Treehouse: 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. stone
    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. Peter Shi
    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.

    • Imran Bughio

      It seems to work in chrome but not in Firefox for me!!

    • Mateus
      Permalink to comment#

      I think it’s because the event is not the same for all browsers. I used to do this way: (using jQuery)

      $(document).on('mousewheel DOMMouseScroll', function() {
          /* ... */
      });
      
  3. Joan
    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. Karlisson
    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. Bastian
    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. Thomas
    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. Kimmo

    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

    • Kleajmp
      Permalink to comment#

      I stared to death at this problem and thanks to your adjusted code it works!

      Thanks Kimmo,
      Kleajmp

    • Ben
      Permalink to comment#

      Thank you so much! This fixed my problem. And also a big thank you to the OP for implementing this. Very much appreciated.

    • Luke
      Permalink to comment#

      Thanks Kimmo, that got it going!

    • Edoardoo
      Permalink to comment#

      Why the hell I don’t read replies before fixing bugs by myself…

    • maria

      Thanks, it works like a charm!!

    • Jesse
      Permalink to comment#

      Kimmo thank you so much for this. I haven’t been able to figure this out for hours!

  9. Hiren Khambhayta

    Great one Chris, keep the new snippets rolling.

  10. Paul

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

    Thank you so much! :-)

  11. Ajay
    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. Nemanja Todorovski
    Permalink to comment#

    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. gareth
    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. Greg
    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 :)

    • Tyagi
      Permalink to comment#

      It seems to work in chrome but not in Firefox for me!!

  19. Constantin Chirila
    Permalink to comment#

    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.

    • Constantin Chirila
      Permalink to comment#

      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. yo gary
    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. Hieu Le Trung
    Permalink to comment#

    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. Maak Bow

    $(“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. Edd Turtle
    Permalink to comment#

    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. David
    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!

    • Chris Coyier
      Permalink to comment#

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

  35. Andy
    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. Maak Bow
    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. Nenad N.
    Permalink to comment#

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

    • Chris Coyier
      Permalink to comment#

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

    • Chris Coyier
      Permalink to comment#

      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…

    • RW
      Permalink to comment#

      Stefan, same issue here—did you solve it somehow? Or just abandon the idea?

  62. Bret Whiteley
    Permalink to comment#

    I am trying to use this together with a map created with the Esri API – it seems there is a conflict in the libraries – anybody have experience with this? Have a look at this JS Fiddle: http://jsfiddle.net/bretwhiteley/x8h2j2zf/1/

  63. Serguei
    Permalink to comment#

    See my working with mousewheel as well here http://englishextra.github.io/pages/tests/tests_ege_news.html

    • Serguei
      Permalink to comment#

      @Tyler

      >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

      — Oh Yeah. This is bothering me too – Firefox and IE10 at least – they cope with that, but not Chrome and Opera which is webkit-based now.

  64. Romuald Brunet
    Permalink to comment#

    Just had to make a small adjustment because in my case I wanted to scroll when the event was over the element only:

    $("#target").mousewheel(function(event, delta) {
        if ( event.target === this ) {
            this.scrollLeft -= (delta * 30);
            event.preventDefault();
        }
    });
    
  65. Clara Baup
    Permalink to comment#

    Ok, my final adjustments to the original code who works on IE9, chrome, firefox for PC.
    And Chrome, firefox, Safari on MAC.
    If bug happens, thanks to tell…

    $(function() {
       $('html, body, *').mousewheel(function(event, delta) {//html body for ie
          //this.scrollLeft -= (delta * 30);
          this.scrollLeft -= (delta * event.deltaFactor);//delta for macos
          event.preventDefault();
       });
    });
    
  66. Pasquale
    Permalink to comment#

    Hello! Does anyone have a code so that with an if/else checking window size can activate or deactivate the script accordingly?

    thanks!

    • joe hoeller

      if(window.width() > 1024) {
      //PLACE INIT CODE HERE
      }

    • Mateus

      just to correct, Joe. You can use window.outerWidth (a property, not a method) or – using jQuery – $(window).width().
      But using window.outerWidth you grant that the value will match with CSS media queries.

  67. joe hoeller

    It doesnt work in IE11 on Win8.x touchscreens. Does anyone have a solution?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```