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

JavaScript

$(document).ready(function() {
    $('html, body, *').mousewheel(function(e, delta) {
        // multiplying by 40 is the sensitivity, 
        // increase to scroll faster.
        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.

View 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="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>
<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.