Today, we submitted a new proposal to the W3C, CSS Scrolling Snap Points, designed to enable fast and fluid panning experiences for touch and other input devices, based on APIs introduced in IE10 and improved in IE11. These APIs enable developers to more easily build panning experiences such as paginated content and scrolling photo galleries that are perfect for touch and work just as easily with mouse, keyboard, or trackpad. A great example of this experience is the MSN homepage optimized for Windows 8:
Users can swipe left or right to browse the day’s headlines. Using CSS Snap Points, Internet Explorer lights up this experience using the same hardware-accelerated panning technology used for panning a Web page with touch in IE. Users get the stick-to-your-finger performance with inertia panning and over-pan bounce that they expect. Additionally, the browser snaps the content to the nearest headline after the user pans.
The code for such an experience is simple, requiring just 2 new lines of CSS:
/* Set up points to which scrolling will snap*/
/* Require that scrolling always end at a snap point */
<img src='img1.jpg'><img src='img2.jpg'><img src='img3.jpg'><img src='img4.jpg'><img src='img5.jpg'>
Coming on the heels of Pointer Events reaching Candidate Recommendation and just a year after our initial proposal of Pointer Events to the W3C, CSS Snap Points is another way that we are advancing the Web by providing rich, immersive experiences that are perfect for touch and work well across other input modalities.
-Jacob Rossi and Matt Rakow, Program Managers, Internet Explorer