An increasing number of sites are using horizontal scrolling to good effect, The Horizontal Way and Modular People below are classic examples.
However scrolling these sites requires either clicking links to anchors, or dragging the horizontal scroll bar at the bottom of your browser. Considering these pages are designed not to scroll vertically, wouldn’t it be great if we could put the now redundant mouse-wheel to better use?
Now you can, using this small piece of Javascript that captures the mouse-wheel activity and translates it into horizontal movement. Once included on the required pages, they will effortlessly scroll horizontally and voila! Ease of use is once again restored.
Usage:
- Download the single file below and include it in the <head> of your page, for example <script type=”text/javascript” src=”hscroll.js”></script>
- That’s all folks, pages will now scroll horizontally!
Download hscroll.js (~1KB)
Limitations:
- Erratic behavior may be experienced when using a multi-directional trackpad such as those on Apple Macbooks, this is because both vertical and horizontal tracking is translated into horizontal movement.
Questions and comments:
- I’d love to hear your feedback, good or bad - why not leave a reply below.
[..] A bit unrelated, but I really liked this website post [..]
question, i dont want the script to affect some text area’s i have in my site, how do i create the exception for them?
Hi do you now anyway to stop the jaggy movement then the wheel is moved to one direction then the other quickly, so it would kind of smoothly swing back to the other direction instead of shaking.
Thank you for your wonderful script.
this is an absolutely great website.
thanks man, it’s cool
Thanks! I’ve been designing my first photography site and this code was exactly what I needed.
(reply to Tyler ~ April 22nd, 2009)
I gave it a try and it works just fine with an iframe as well. Did you put the code in the page that contains the ifreme (wrong), or in the page that IS the iframe (correct)?
If you’re really stuck email me and I’ll send you the test I got working. If that’s ok with Paul.
Eyal
We have three different horizontal galleries on our website to showcase our graphic, book and web designs. No matter how clear we tried to make it (and we did, in words and with auto roll-over scroll scripts), some visitors still didn’t get the idea, didn’t scroll and just didn’t see what’s on those pages.
Well, no more! I think that everyone gives an instinctive roll to the wheel when they’re not sure if there’s more content in a page and hey - it works SO fine on our site.
Check it out:
http://www.2kilo.nl/grafisch_eng.htm
http://www.2kilo.nl/typografie_eng.htm
http://www.2kilo.nl/webdesign_eng.htm
Thank you VERY much Paul.
Hi there, I’m trying to get an iframe to scroll horizontally and thought I’d found the answer, but for whatever reason, I can’t get your javascript fix to work. I’ve saved your code in the same folder as the page set in the iframe and tried using the supplied …</sc… in both the head and then the body when that didn’t work. I’m extremely greatfull that you put this out there, I’m just hoping you might have some input on why it won’t work for me.
Thanks,
~T
very good
I think these web sites designed for mac, with mighty mouse, you don’t need a script. You can scroll it already.
Hmmm. Doesn’t seem to do anything. Anyone really get this to work? Does this require some DIV elements? I didn’t see a working example using this script.
It doesn’t seem to work in Internet Explorer 7 if a correct DOCTYPE (e.g. xhtml 1.0 strict, html 4.01 transition) is used.
once I comment out the doctype, it works fine. Any ideas why that might be?
Thanks for putting this together, it’s a great tool.
I tried the script and it really works well but as much as I like the way I can scroll horizontally I still want a bit of the option to click on links to smooth scroll to a section of the page horizontally within tables instead of DIVs because it was difficult to implement. Is there a special and much more easier way to use this script to make anchored links?
But you could not add arrows to the left to the right?
Hi Linda, just add the script before your /head tag and it should work straight away. Similarly with Wordpress you can add it before /head in header.php.
Hello,
I do love the horizontal scrolling thing and I am building my first website right now…
So can please somebody tell me in detail where to add the script exactly. I am also trying it with wordpress and it does not work at all
Thanks a lot!!!!
Linda
Thx
Great work!
Works on most browsers, only on Opera the rotation is flipped and it does not work on safari for windows.
Any ideas?
Awesome script.
Any chance you could reverse the horizontal and vertical scrolling? That way, users would still have the option of vertical scroll, by using the shift key, which normally allows horizontal scroll.
TTFN
Travis
ooops. I just noticed your link to “The Horizontal Way”. I guess it’s the same principle. Thanks again for sharing.
nice script. any chance to see a demo?
This is great! I have been looking for an easy solution the horizontal scroll. The .js file from “The Horizontal Way” does not play well with mootools but your file integrated effortlessly with no problems! Thanks!
Hi Arturs, this will work well with a Wordpress blog. If you are OK with theme building I would suggest creating a wide containing div, then create smaller divs in horizontal format using the loop.
Hi! Thanks for file. Will it work with Wordpress blog too, or i need to do some modifications?