Horizontal Scrolling with jQuery [Updated]

The large majority of websites on the internet prefer vertical, portrait pages and for a good reason. Vertical pages work well with the way we read and the hardware that we use. But sometimes, just sometimes, it is nice to be different and build a website around the horizontal axis. This, however, poses limitations because the computer mouse, and it’s mouse wheel, does not scroll sideways – but this can be rectified with good-ol’ jQuery.

To get horizontal scrolling, the Mouse Wheel Plugin by Brandon Aaron (GitHub, Download) will be used to detect mouse wheel movements like a keypress and of course, jQuery itself will be used. Check out the Demo.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>

JavaScript

$(document).ready(function() {
	$('html, body, *').mousewheel(function(e, delta) {
		this.scrollLeft -= (delta * 40);
		e.preventDefault();
	});
});

The JavaScript can just be added into the Head tag. Note that scrolling applies to html, body and * (everything) – this enables it to work across different browsers. The event.preventDefault() just disables vertical scrolling.

Demo

For more information, check out the CSS-Tricks page which has some helpful comments.


… As an Alternative

Update 11/11/12: A very promising jQuery plugin (which I’ve yet to actually test) is available called Sly which is worth researching.

Check Out Sly

32 Responses to Horizontal Scrolling with jQuery [Updated]

  1. Alex says:

    Any idea how you make it so that you can just scroll when the mouse is over the images, but no over the rest of the page? Otherwise you can’t have vertical scrolling (I’ve removed the css to hide vertical scrolling).

    • Edd Turtle says:

      In the demo we used the $(‘html, body, *’) selectors, have you tried replacing that with a <div> tag containing images or something? Would be interesting to know how easy it is.

  2. Pingback: Scroll Page Horizontally With Mouse Wheel | laboratoriumody

  3. Javier says:

    Hi Edd!

    I love the side scroller you’ve made and especially like the fluid-like scrolling you’ve achieved. I’m having some issues implementing it on my site and i’m wondering if you can give me some pointers?

    Here are all the details: http://stackoverflow.com/questions/18971556/horizontal-image-scrolling-using-query

    Here is the page where i’m actually implementing it: http://alljavi.com/trusell/find.html

    I’d really appreciate any help you can give me!
    Cheers,

    Javier

    • Edd Turtle says:

      The answer on Stack Overflow is marked as resolved. Do you have it all working now?

      Great to hear you’re using it, if I can be of any help let me know :)

  4. Inbal says:

    Hi Edd,
    Thank you for the share- it works great!
    What I would love to know is if there is a way to have the page scrolling horizontal but have one of the divs scroll vertical (normal)?
    What I basically mean is, is there a way to cancel the horizontal scrolling on specific elements?
    Any help will be great,
    Thank you!

  5. Inbal says:

    Thank you Edd,
    unfortunately that works only on textarea for some reason. I am trying to figure out why.
    will love to hear your suggestions.
    Thanks again!

    • Edd Turtle says:

      I’ve updated the example so that it isn’t a textarea, but a div with a class, and it seems to work in chrome. Can you post an example?

    • Edd Turtle says:

      Ahh! You’re right, the difference is that in my examples I only had one box to scroll (ie. it had no children). jQuery will always call the hover of the top most element, so it isn’t being detected. I’ll think about this and get back to you.

  6. Kate says:

    Oh, just what I need! I’m using WordPress with a simple theme to setup a simple “portfolio” website, where posts are acting like galleries – just images with horizontal scrolling.
    I’d like to scroll images using the mouse wheel
    The type of gallery on my site I’m talking about:
    http://rainscience.co.uk/?p=84

    I’ve tried adding the script in the header.php (part of the theme), but.. it doesn’t seem to be working.
    I’m a newbie, so I might be doing it all wrong.. any advice? :)

    • Edd Turtle says:

      Hi there Kate, can you show us an example? If it’s not working, you could always try putting the jQuery, MouseWheel plugin and the little script down into the footer.

Leave a Reply