Horizontal Scrolling with jQuery [Updated]
Edd Turtle
Software Engineering Student & Self-taught Front-end Web Developer. Lover of coffee, exploring and climbing.
Can be found @eddturtle.
Post Category: JS & jQuery, Web Design
Author: Edd Turtle
Permalink: http://www.designedbyaturtle.co.uk/2012/horizontal-scrolling-with-jquery/
Date Created: June 23, 2012 at 1:17 am
Date Last Edited: May 15, 2013 at 12:41 pm
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.
DemoFor 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.Recent Articles
Blur a Background Image (with help from blur.js)
Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, we...
View Full Post →Showing your E-mail Online
We all know about spam and up until recently there wasn't an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of s...
View Full Post →
Nice ! That combined with an iScroll* like inertia scrolling but with magnetism (scrolling snaps to its items so that anytime whole pages are shown)
Would be awesome
*http://cubiq.org/iscroll-4
Ye, it would be interesting to combine this technique with others, like iScroll 4 – I may give it a try sometime.
Great demo, thanks!!
Hey there!
I was wondering if you managed to got this horizontal scrolling working in firefox?
Cheers,
Dominic
Nvm
It works perfectly also in firefox, just made a mistake.
Thanks for this great demo!
Cheers
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).
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.
Yeah, I tried but it doesn’t seem to make a difference. Actually, the only that seems to matter is the *
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 *)
Cheers. I think I’ll end up using this, just for ease of implementation for my needs.
http://www.htmldrive.net/items/show/966/jQuery-Horizontal-automatic-Scrollbars-with-mouse
[...] http://www.designedbyaturtle.co.uk/2012/horizontal-scrolling-with-jquery/ [...]