Horizontal Scrolling with jQuery [Updated]

Horizontal Squares

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) will be used to detect mouse wheel movements like a keypress and of course, jQuery itself will be used. Check out the Demo.


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


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

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.


[15/05/14] Howto: Install with WordPress

After plenty of feedback, here’s a quick guide to getting it to work with WordPress. There’s only very minor changes needed, but it’s easiest to explain here.

Step 1: Download ‘jquery.mousewheel.min.js’ from GitHub.

Step 2: In your WordPress theme directory /wp-content/themes/<themename>/ there should be a js folder (if not create one) and place the recently downloaded ‘jquery.mousewheel.min.js’ file in the folder.

Step 3: Also in your theme folder, find the file footer.php and just before the </body> (at the end of the file), place the script below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.mousewheel.min.js"></script>
$(document).ready(function() {
    $('html, body, *').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);

Note: The main important change of this is the addition of the <?php echo get_template_directory_uri(); ?> PHP code.

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

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


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

    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.

  7. Pingback: 10 jQuery Horizonal Scroll Demos & Plugins | jQuery4U | No.1 Resource for jQuery Developers

  8. Jimmy says:

    Hi Edd. Thanks for all your efforts to help others in need of codes :) I am stuck with all this as it is new to me. Can’t figure it out where to put everything. Have all downloaded, copied and seems like I am putting everything in the right places but nothing is working. Could you assist me by saying where I should put the :

    also the

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

    in my theme? I am using this theme for my project: http://portra.wpshower.com/

    Would really appreciate!

    Thanks for your time in advance!

    • Edd Turtle says:

      Hi Jimmy, I’ve updated the article to have it’s own WordPress section. I can also confirm that it does work with this theme (I tried it). If you’re still stuck put it up online and I’ll take a look.

      • Jimmy says:

        Hey Edd. Thanks for your quick reply. The project is online, sorry that I didn’t post the link earlier.

        Added the code as you instructed and it works fine! But as I added the horizontal scroll I realized that the pages of the web have to have the normal vertical scroll to see the all the info there. For example this one: http://www.arfoto.lt/fotografo-paslaugos/
        Is there a chance to have them both scroll options present on this web? Perhaps you have an idea on what would be the easiest solution here?

        Once again – really appreciate your help!

Leave a Reply