Horizontal Scrolling with jQuery [Updated]

Horizontal Scrolling with jQuery [Updated]

   100 Comments    http://bit.ly/1Qh3fKD

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="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>


$(document).ready(function() {
    $('html, body, *').mousewheel(function(e, delta) {
        // multiplying by 40 is the sensitivity, 
        // increase to scroll faster.
        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="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/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.

100 responses to “Horizontal Scrolling with jQuery [Updated]

  1. 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).

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

    1. After a little attempt, you might be able to use something like this: http://jsfiddle.net/eddturtle/HYR3y/ (which is based on a StackOverflow question: http://stackoverflow.com/questions/7349848/scroll-div-instead-of-page) if you don’t want it to be the whole page, there’s a lock option or just change it to how you like 🙂

      Also the $(‘html, body’) are needed as well as the * in this example for browser support (one of the browsers ignores the *)

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


    1. 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 🙂

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

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

    1. 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?

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

    1. Hi there Richard, I’ve had a quick look at your site and I can’t see how this code would change the layout of your page… Maybe it’s to do with the Mouse Wheel Plugin?

      1. Well as soon as I added the code to the HTML, the layout of the horizontal DIV changed to vertical. Thanks for taking a look, will try to take it up with the developers of the platform, as I have no clue beyond CSS…

  5. 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? 🙂

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

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

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

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

        1. You can delete ”e.preventDefault();” but then both scrolls will work at the same time.
          In this option the X will work very slow.

          I’m stuck at this now too

          1. I have the same problem with the portra theme.
            Did you guys come up whit a solution ?
            Would it be possible to apply the code to a page in particular instead of the whole site?

  7. Heya,

    trying to implement this as it’s perfect for the issues I’m having on my clients site which is a side scroller. I tried following the WordPress steps but it seemed to stuff up the site, I didn’t have a folder for the JS either, I’m a massive noob so no idea what to do 😀

    1. Well I made a folder called JS in the theme and added the file to it, then when I try to add that code to the footer the theme just breaks?!

  8. Hello,
    Thank you very much for the contribution.

    I have a question, I would sit flat in the middle of the screen and the first div and then go past the other, but can not get it to work.
    In case you do not understand what I want to say I leave an example of a page.

    Thank you

      1. I’m sorry, apparently the system deleted the code when I submitted the comment, I’m talking about this file


        whenever that script is loaded from the footer.php the rest of the wordpresss theme stops working correctly, I found some articles that said I could use this code instead:

        <?php wp_enqueue_script("jquery"); ?>

        but the horizontal scroller stops working with that, know of any workaround for this?

  9. How to make smooth scroll on apple trackpad.
    It is too fast on apple track pad.
    I want to add scroll which stops at certain pixels.

    Thanks and regards

  10. hello, your version that allows vertical navigation when scrolling over a designated div really solved all my problems, but now i have a new one, i followed your tutorial on installing it on wordpress, it all worked like a charm but then i foun that when i this file into the footer.php

    the rest of the plugins and some theme functions cease to work, is there any alternative to loading jquery.min.js in wordpress so it doesnt interfere with the rest of the wordpress functions?

  11. Hi!

    Please note that the right way to declare scripts in your WordPress template is to do it in the functions.php located in your template directory.

    function header_scripts()
        if (!is_admin()) {   // Avoid loading scripts on admin backend
    	// Unregister WP jQuery
    	// Register jQuery - Google Hosted
        	wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), '1.10.2'); 
    	// Register jquery.mousewheel.js - Temlpate JS
            wp_register_script('mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.js', array(), '3.1.12');
    // Load header scripts
    add_action('init', 'header_scripts');
  12. hey all what about making it slides automatically, i mean to slide with mouse scroll and autoumatically without scrolling 🙂 tnx

  13. Horizontal scroll w/ horizontal wordpress themes follow above, but note if you want to have your single posts able to scroll y-axis as well, just remove ” e.preventDefault();” from the script, set delta to a high 3 digit #(set mine to 888) for better horizontal scroll function, gg.

      1. Yes, removing e.preventDefault will allow users to be able to scroll down as well.

        The thing to note when for this function would be to design for pages that only are using one or the other(x / y-axis) as it will be conflicted, in that it will try to scroll both at the same time if both scroll bars are in use.

        Though, it would be interesting to design a site that moved diagonally, perhaps in the future someone will create a parallax animation moving diagonally down the page using this code.

  14. hello

    Thanks for the demo!
    I have the jquery working, but it only allows the mousescrol to occur once and only from left to right. Is there a way to edit the code to make it possible to scroll back and forth horizontally?

    Thanks so much!

      1. yes! not sure if thats just the way the function is or if im doing something wrong. I checked out the demo you posted and the same problem arises, maybe its the mouse im using?

        1. Should work fine, it works by minicing the middle mouse wheel, and turning it horizontally – so if you can scroll normally with a mouse, you should be able to go left and right. What mouse are you using?

  15. I’m trying to get this to work on my wordpress site using the Mercury theme’s classic gallery here- http://petermichelena.com/wp/galleries/fashion and having difficulty. The jquery.mousewheel.min.js is intalled (it came with the theme) , but when I add the script –

    <script src="/js/jquery.mousewheel.min.js”>

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

    to my footer.php just before the </body> tag as instructed, the gallery images are no longer visible. Please advise. Thanks!

    1. Hey Peter, looks like you have everything loaded, but you’re body/website isn’t running horizontally (in the css).

      We’ve achieved this in the demo with this CSS:

      #filler { position: absolute; top: 0; left: 0; width: 3900px; height: 100%; }
      #container { width: 3900px; position: absolute; top: 50%; margin-top: -150px; }

      A horizontal wordpress theme might help (depending how attached you are to it).

      1. Hey Edd, Thanks for the lightning quick response! I like certain aspects of this theme and have already done a fair amount of customizing, so I’d like to get it to work. I’ll try adding the code you supplied. Thanks again!

        1. Haha, that code isn’t copy and paste-able. It was just showing the principle, that your container, holding your images, will by default run vertically and you have to force it to run horizontally first – then you can use the scrolling snippet.

          1. Hey Edd,

            I couldn’t find #filler or #container in any of the CSS files, just #page_content_wrapper. This is harder than I thought it would be. haha. any more hints? Thanks!

  16. Hey EDD, I added the code to the “custom CSS” interface in the theme settings and the page still loads vertically. Is there somewhere else it should be added? A specific CSS file perhaps? Thanks!

  17. Mixed Content: The page at ‘https://www.designedbyaturtle.co.uk/demos/horizontal-scrolling/‘ was loaded over HTTPS, but requested an insecure script ‘http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js‘. This request has been blocked; the content must be served over HTTPS.

    1. Hi there, we’re using on html, body or anything (*) scroll sideways. you could specify in there not to scroll sideways for your containers – that way they’d scroll down like normal.

  18. Hi, i am trying to reproduce your example with the color squares in horizontal scroll but no success. It would be really helpful if you could guide me or if you could sent me with a zip file the right one.

    thank you

  19. Just in case nobody has pointed out it yet, you can both use this plugin with the nicescroll plugin to get quite a good smooth scrolling. You just have to define delta * 1 in order to give the scrolling amount to the nicescroll and you got it!

  20. Hi Clara, hopefully you got my email. You’ll need to make sure there’s an element with a width greater than 100%, stretching the page to be wider than your browser, causing a horizontal scrollbar to appear and allowing it to work. Your link doesn’t seem to work with FF or Chrome for me. Any other questions let me know 🙂

    1. Thank you! You are literally the 1st person to tell me the demo’s aren’t working since we switched servers – should be all fixed now.

Leave a Reply

Your email address will not be published. Required fields are marked *