Got it working on Firefox too. I used $(“body”) to refer to the container and it worked perfectly on Chrome. On Firefox, for some reason, the selector must be $(“html”). So, I just combined both to $(“body, html”) and now it works. See the snippet below:

Thank you, this fix my problem with horizontal scrolling when overflow: hidden, scrolling on defalut work without mousewheel in FireFox, but not work on other bowser, with your tricks work nice on Chrome etc… Thank you again.

this is working almost perfect – spotted a little glitch tho. Seems like when your content does not fill the entire height of the page (and why should it, when you want horizontal scrolling), then theres a certain part of the page at the bottom, where the scroll fails, when you scroll all the way to the other end – in other words, when you scroll away from your original viewport, then the scroll stops working on that bottom part of the page that does not have content.

Could it be something about viewport? Even when HTML and Body both have height: 100% in the initial view, maybe the 100% fails when you scroll away from the “first display”?

Problem being columns don’t fill top to bottom, so once you leave the first “viewport” (scroll right) where the heights are truly 100%, the site will stop scrolling if you aren’t hovered over text in a column.

This also caused a problem with backgrounds past the initial viewport. But that’s unrelated to the scrolling (just the current implementation of multi-column).

I’m also experiencing this problem related to css3 multi column layout. It seems scrolling with the scrollwheel doesn’t work when the cursor has a position that is between the columns. I’ve noticed this problem in the current Chrome (28). The current firefox (22) doesn’t have this problem.

I’m currently investigating why this problem doesn’t occur with the jQuery nicescroll plugin. (Which i can’t use for other reasons)

Hi there — I was wondering if there is a way to ‘switch off’ this functionality (having first activated it).
In my case, I have a page that scrolls L > R, and a long hidden div that I’m showing on the same page with jquery. I’d like the horizontal scrolling to be temporarily deactivated when I show that longer div, and then reactivated when I hide it again.

I don’t know if it is the best option, but it’s working for me. When you show your div, load the script for “normal scrolling”. It’s the same script as horizontal scrolling, you just have to change “this.scrollLeft -= (delta * 30);” into “this.scrollTop -= (delta * 30);”.

Hey Chris, I wanted to give you a heads up that this snippet is no longer functional. You’re linking to the most current javascript, but the mousewheel plugin is old.

Perhaps for future snippets, note the current versions of the various scripts? (I recently ran into the same problem of a website breaking because my old js wasn’t working with the newest jquery version)

Thank you for making this possible and very easy for a newbie like me. The plug-in works perfectly in my website, the only problem is when accessing the page using a mac with its horizontal scroll pad (by dragging two fingers horizontally) it seem a bit weird when one has to scroll vertical to move something horizontal. Is there a way to make the horizontal scroll works as well?

Does anyone know how to disable the plugin just to the touchpads?
When navigating with touchpad some conflict between horizontal and vertical movement occur.
If navigating with touchpad I don’t find this plugin useful at all, so it would be just perfect to disable it, when specifically navigating this way, working just for mousewheel.
Can anyone help me?

Just launched a completely horizontal site and used some info from here to help..at least at early stages… The code morphed a bit. Thanks.
I did manage to get the page and sub pages within it completely growing horizontally to the left using inline-block, white-space:none and font-size:0.

And… Um yeah, 12 months later and a new marketing manager decides to rebuild the entire site into a templated wordpress site. We worked hard to make a very usable horizontal site that pleased the clients and branding agency and had a great umbraco CMS customise for a modular horizontal aproach.

I am trying to get this to work in a single div, or rather when (top > 1400). Essentially, scroll down, meet the div in question- then scroll horizontally.
However, this either causes the elements higher up on the page to get covered by a right margin on scroll down, or disables scrolling completely.

Hi, Thanks for the script but it is not working on Firefox. I am using a 24+ version of Firefox. The script works fine on chrome but not on Firefox with mouse scrolling but the keyboard arrows work to move the page left-right.

I think this is not an optimal solution, because if you have a trackpad and scroll from left to right or right to left, the scrolling is not smooth. It seems to be a solution for making a vertical scrolling movement a horizontal one, but it creates problems if you scroll horizontally…

I am trying to use this together with a map created with the Esri API – it seems there is a conflict in the libraries – anybody have experience with this? Have a look at this JS Fiddle: http://jsfiddle.net/bretwhiteley/x8h2j2zf/1/

just to correct, Joe. You can use window.outerWidth (a property, not a method) or – using jQuery – $(window).width().
But using window.outerWidth you grant that the value will match with CSS media queries.

Might be because mousewheel event is fired only when the “mouse wheel” is used. I think for touch you should use touchmove event or something like that. (Internet Explorer has some prefixed events for this like MSTouchMove as you can see here https://msdn.microsoft.com/en-us/library/dn304886(v=vs.85).aspx )

Hello,
Is there any option in such a way, that we use and the first row or tag is fix position but can scroll Horizontal, and the all tag will also Scroll Horizontally until the tag’s data end. Demo is

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.