I just finished working on the Lovie Awards Winners Gallery. As a result of the Microsoft partnership I learned quite a bit about touchscreen support in IE10. Part of the site has progressively enhanced sideways scrolling areas which are swipeable on touch screens. I’ve put together a few demos here to show what we ended up doing and highlight some of the gotchas.

1. Native horizontal scrolling

First up, the vanilla version. Below shows normal browser behaviour; simply a horizontally scrolling area using overflow-x: scroll. Mouse wheels and track pads can scroll freely on the x axis. Touch devices allow the window contents to be dragged about freely.

It’s worth noting that iOS doesn’t scroll divs the same way as it scrolls whole windows – It drags and stops with no momentum. Not a very nice effect, but we’re going to fix that.

Note that we could hide conceal the scroll bar, but I’ve not done so for these demos.

2. Enhanced with swipe for IE10 using pure CSS

IE10 comes with a whole host of new vendor-prefixed CSS properties, which mean you can add some touchscreen interaction without using any JavaScript. The demo below enhances the native scroll with the following properties applied to the scrollable area.

-ms-scroll-snap-points-x: snapInterval( 0px, 187px );
-ms-scroll-snap-type: mandatory;
-ms-scroll-chaining: none;

You’ll need a Windows 8 tablet or phone to see this working. As you swipe through the scrolling area it stays snapped to whole items.

The CSS is simple and unintrusive and makes for a great progressive enhancement. Additionally it should be faster and smoother than a JavaScript solution because it uses the browser’s native capabilities. It can harness hardware acceleration on some devices. (I am told *).

The first two CSS rules state that the scrolling area will be swiped 187 pixels at a time. The third rule prevents the entire page from swiping when the scroll area is fully at one end. That last part is important, because a full page swipe to the left will jump the browser history back; this is a very annoying thing to do accidentally.

Here’s the code in jsfiddle: http://jsfiddle.net/timwhitlock/WM583/ The JavaScript here is purely to show when an item is tapped rather than swiped. The browser natively avoids firing click events when using these CSS properties.

(* Many thanks to Jacob Rossi from Microsoft who helped me make sense of these new properties)

3. Enhanced swipe for other touch devices using JavaScript

If we want this effect on other touch devices, like iPad for example we need to write some JavaScript. The demo below builds on the above with support for touch browsers implementing the touchstart family of events.

You’ll need an iPhone, iPad or other device supporting touch events to see this working:

Here’s the source code in jsfiddle. http://jsfiddle.net/timwhitlock/2vJDs/

There is one gotcha worth mentioning with this demo. As we’re handling the scroll position ourselves via the touchmove event we need to ensure that vertical swipes where the user intended to scroll the whole page are not ignored. This is just a matter of measuring the velocity of each movement. If it’s more vertical than horizontal we allow the event to pass. That code looks like this.

4. What about IE10 touch events?

The last demo above works pretty well and is the final solution we used in the Lovies site. We’re using script control for most touch-enabled browsers, plus a CSS solution that does the same thing in IE10. Plus, the whole thing degrades to non-touch browsers that can still scroll via mousewheel or trackpad.

But what if we want an effect or interaction that IE10 doesn’t support via its new CSS touch properties? Well, then we will have to write some more code and get involved with IE10’s alternative touch event model – That’s the subject of part 2.