通过 CSS 滚动吸附点规范，实现全新的互操作平移体验

  • Article

今天，我们向 W3C 提交了一个新提案，CSS 滚动吸附点，其旨在为触控和其他输入设备实现快速而流畅的平移体验，该提案基于在 IE10 中引入并在 IE11 中得以改进的 API。这些 API 允许开发人员更轻松地构建平移体验，例如完美支持触控的分页内容和滚动照片库，并且操作起来就像使用鼠标、键盘或触控板一样轻松。该体验的典型示例就是针对 Windows 8 进行优化的 MSN 主页：

针对 Windows 8 进行优化的 MSN 主页

用户可以向左或向右轻扫来浏览当天的头条新闻。借助与在 IE 中使用触控功能平移网页的相同硬件加速平移技术，Internet Explorer 利用 CSS 吸附点让这一体验大放异彩。用户可以获得他们期待的“粘住手指”的惯性平移和过度平移反弹等性能。另外，在用户平移之后，浏览器还可以捕获最近的头条新闻的内容。

实现该体验的代码非常简单，只需在 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>

该代码可以处理 IE10 和 IE11 中的触控轻扫；作为 IE11 的新增功能，这一相同标记还可以自动适用于鼠标滑轮、箭头键和触控板，即允许用户访问这些体验，无论他们此时正使用哪种设备进行浏览。通过编写 JavaScript 来实现类似的体验可能需要数百行代码，而且无法提供“粘住手指”的操作，通常低端硬件还会出现性能不稳定的情况。

紧跟指针事件之后的是备选建议，而就在我们向 W3C 提交我们的初始提案一年之后，CSS 吸附点成为了我们推动 Web 的发展的另一种方式，它提供了完美支持触控的丰富的沉浸式体验，并且可以良好地适用于其他输入设备。

-Internet Explorer 项目经理 Jacob Rossi 和 Matt Rakow