Horizontal Scrolling with jQuery [Updated]

Horizontal Scrolling with jQuery [Updated]

   63 Comments    http://bit.ly/1cejV3U 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.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/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

[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>
<script>
$(document).ready(function() {
    $('html, body, *').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});
</script>

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.

63 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!
    Cheers,

    Javier

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

    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);
    		e.preventDefault();
    	});
    }); 
    

    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?
            Thanks

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

    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.
    http://www.antoniourraca.com/

    Thank you

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

        //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

        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
    Anand

  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
        	wp_deregister_script('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'); 
        	wp_enqueue_script('jquery');
    
    
    	// Register jquery.mousewheel.js - Temlpate JS
            wp_register_script('mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.js', array(), '3.1.12');
            wp_enqueue_script('mousewheel');
    
      }
    }
    
    // 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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>