Scrolling in a whole other dimension


Take your favorite content slider and try this: on a Mac notebook, two-finger scroll. I'll bet my hat (easy to do when you don't wear hats) that the component will go nuts. For one thing, it will most likely be mapping your vertical scroll gesture to a horizontal scroll. I don't know who first decided that was a good idea but I think we can safely agree that it doesn't make any sense. And every content slider out there that I've encountered does this! So much so that I actually thought that you simply couldn't get horizontal scroll information from the "mousewheel".

But you can.

Here's a little example I just hacked together that demonstrates it.

It uses the jQuery Mousewheel plugin by Brandon Aaron which gives you a neat callback with the deltaX and deltaY of the mousewheel/trackpad two-finger scroll.

I've only tested this on Firefox and Chrome on my Mac and it worked on both.

So, dear content-scroller-makers-of-the-web, let's use that lovely little deltaX property to actually map horizontal scroll gestures to horizontal scrolls and leave the vertical scroll alone so that the web page can, y'know, scroll like it should.

Update: I improved the example with a nifty little compass. Nicer to look at. Not sure why I had to do that at almost 1AM but hey, enjoy!