A PHP Error was encountered

Severity: Warning

Message: Creating default object from empty value

Filename: libraries/MY_Controller.php

Line Number: 62

A PHP Error was encountered

Severity: Warning

Message: Creating default object from empty value

Filename: libraries/MY_Controller.php

Line Number: 71

A PHP Error was encountered

Severity: Warning

Message: Creating default object from empty value

Filename: libraries/sweetcron.php

Line Number: 236

Horizontal page scrolling using Javascript › Paul Bennett

Horizontal page scrolling using Javascript

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 of your page, for example 
  • 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.

Reply to Horizontal page scrolling using Javascript

That's really thnkiing of the highest order

You have the monopoly on useful inotimafron-aren't monopolies illegal? ;)

I see a lot of interesting posts on your blog. You have to spend a lot of time writing, i know how to save you a lot of time,
there is a tool that creates unique, SEO friendly posts in couple of seconds, just type in google - k2
unlimited content

Hello, I can't access this link to see your coding.
http://paulicio.us/wp-content/uploads/2008/10/hscroll.js
I get an error message. Could you forward it to me please? I'd love to do something like this on our website.

may i use this on my site?
(your code)

Great example. thanks for share

THANK YOUUUU!!! i've been trying to do that on my webpage since a long time!! and never worked untill now! so clean and short script! congrats! :)

I tried all of the horizontal scroll solutions and this is the only one that works - well done - and a simple include at that

very fantastic information keep on doing work

Works great.

One issue: when the pointer is over a video (Vimeo player/iFrame) the mouse will not scroll.

Any suggestions?

It would have been nice with a permissive open source license on the code, such as the MIT license.

It WORKS GREAT Dude :). Thx. It's an AWESOME script. Exactly what I'm looking for.

Hi Mr. Paul,
I have tried the "hscroll.js" file, but it was not working with me !
Could you please explain for me how can I call "hscroll.js" file in my html code ?!

I am waiting for your replying.
Thank you.
Layla


YOU NEED TO INSERT THE SCRIPT HERE AND BEFORE THE TAG IN YOUR HTML

Hello friend. Could you explain how to implement this js in my wordpress http://www.juniorfurlan.co.cc?

I've tried everything over the scrip does not work.

Thanks

Just want to let you know that Google Chrome Better Pop Up Blocker addon breaks hscroll.

Hey Paul, thank you for sharing that script. It works to perfection, pretty smooth. Keep it up :)

[..] 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.

nagarajan 8 years ago

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.

Steed 8 years ago

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.

linda 8 years ago

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

Sergey 8 years ago

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?