Enabling new interoperable panning experiences through the CSS Scrolling Snap Points Specification

IEBlog

Internet Explorer Team Blog

Enabling new interoperable panning experiences through the CSS Scrolling Snap Points Specification

  • Comments 20

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:

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:

<style>
    .photoGallery {
    width: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Set up points to which scrolling will snap*/
    -ms-scroll-snap-points-x: snapInterval(0px,100%);
    /* Require that scrolling always end at a snap point */ 
    -ms-scroll-snap-type: mandatory; 
    } 
</style> 
<div class="photoGallery"> 
  <img src='img1.jpg'><img src='img2.jpg'><img src='img3.jpg'><img src='img4.jpg'><img src='img5.jpg'> 
</div>  

This code works with touch swipe in IE10 and IE11; new in IE11, this same markup automatically works with mouse wheels, arrow keys, and trackpads—allowing users to access these experience no matter the device they happen to be browsing with at the moment. Enabling a similar experience by writing JavaScript can take hundreds of lines of code, often doesn’t offer stick-to-your-finger manipulation, and typically stutters in performance on low-end hardware.

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

  • Loading...