What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » jQuery » Scroll Page Horizontally With Mouse Wheel

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

Subscribe to The Thread

  1. stone

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

    Reply ↓
  2. Peter Shi

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

    Reply ↓
  3. Joan

    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();

    });

    });

    Reply ↓
  4. Karlisson

    I tried this and worked:

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

    Reply ↓
  5. Bastian

    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

    Reply ↓
    • epoy

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

  6. Thomas

    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?

    Reply ↓
  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.

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

    Reply ↓
    • Kleajmp

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

      Thanks Kimmo,
      Kleajmp

  9. Hiren Khambhayta

    Great one Chris, keep the new snippets rolling.

    Reply ↓
  10. Paul

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

    Thank you so much! :-)

    Reply ↓
  11. Ajay

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

    Reply ↓
  12. Tomas Danilevicius

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

    Reply ↓
  13. Sam

    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.

    Reply ↓
  14. nykeri

    um sorry but this does not work

    Reply ↓
  15. Nemanja Todorovski

    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.

    Reply ↓
  16. gareth

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

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

    Reply ↓
  17. Greg

    Add the star selector *.

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

    mousewheel plugin is no longer available to download

    Reply ↓
    • !amotio

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

  19. Constantin Chirila

    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.

    Reply ↓
    • Constantin Chirila

      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

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

    Reply ↓
  21. yo gary

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

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

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~