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
-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 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.
(* Many thanks to Jacob Rossi from Microsoft who helped me make sense of these new properties)
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.