Aral Balkan

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!

Comments

• An excellent point. Using the deltaY to scroll horizontally in an area that only supports horizontal scrolling used to make sense, in a world where scroll wheels were the only way to scroll. But we’ve not lived in such a world for several years now. Trackpads quite naturally enable scrolling in two axes. Many mice also support it, with tilting scrollwheels and the like, or (like the magic mouse) gestures.

  by Andy Durdin on 2011-05-13 22:17:44

• Vertical to horizontal scroll has always bugged the hell out of me. I have inherent dislike for content that scrolls from horizontally anyway so rather than use your clever little fix I wish people did not do the left to right thing. that's just my ranty little opinion.

  by lomokev on 2011-05-13 22:25:16

• Kevin, I'd love to hear what you think of the new Update site when it goes live. I don't think that horizontal scrolling as a gesture is inherently evil. I _do_ think that the implementations that currently exist are unusable – at least the ones that I've seen (and I've seen quite a few in the last few days). There's definitely lots of room for optimizing that particular interaction (and it works really well on touch-based devices via swipes – it's a very natural gesture).

  by Aral on 2011-05-13 22:29:46

• I think it just that I am so used to scrolling up and down that going left to right only feels like something you do when you browser window is to small. Also not every one has a fancy track pad or magic mouse. Some people don't even know that you can 2 finger swipe, you have to watch my mum use the web to see that. Really interested to see the new site!

  by lomokev on 2011-05-13 22:34:49

• I hear you but that's not how all mice work. Windows mice don't always have a horizontal scroll option [some don't even have a mousewheel] and when they do they are far less useful than a magic mouse/trackpad [at least in the implementation]. So if the majority of mousewheels are vertical only [since pc sales trump mac], you can expect support for the majority to win. NOW...with that said...I agree w/ you. lol. It doesn't make sense from an interaction perspective but up and down [thinking volume] on the mouse should adjust my volume up or down [regardless of slider position/direction]. Just some thoughts. :)

  by John C. Bland II on 2011-05-13 23:09:25

• Really nice example. I might be missing something, but, why use the two-finger scroll? Isn't the one-finger gesture suppose to scroll the content? Also, on Chrome (on Mac) the two-finger horizontal scroll is the default gesture to access the current tab history (similar to javascript:history.back and forward).

  by Paul Ardeleanu on 2011-05-14 13:41:42

• Hey Paul, First off, thanks, glad you enjoyed it :) Re: one-finger/two-finger – I think I'm missing your point. On desktop how do you do a one-finger scroll? (Are you referring to a touch interface like iPhone/iPad? In which case, this example is solely for desktop.) Also, re: Chrome, I can't seem to reproduce that default behavior. Are you sure it's default?

  by Aral on 2011-05-15 16:36:31

• Very cool! If you add the -o- prefix for Opera and -ms- for IE10 (or thereabouts) you've got yourself a pretty sweet cross-browser demo. :) http://people.opera.com/miket/2011/5/aral.html

  by Mike Taylor on 2011-05-31 09:21:37

• Hey Aral, There are couple of ways to do scrolling on the desktop: magic mouse, magic trackpad. And on the portables, you also have the built in trackpad. Gestures using the mouse kick ass! :)

  by Paul Ardeleanu on 2011-05-18 16:09:45