使用触摸和其他输入方式滚动和缩放

Windows 8.1 上的 Internet Explorer 11 建立于通过以下方法对滚动和缩放进行微调控制:通过添加对其他输入类型(如触摸板、鼠标以及键盘)的支持在 Windows 8 上的 Internet Explorer 10 和 Windows 应用商店应用中引入触摸以及通过达到滚动和缩放动画效果的新方法。.

要点  此功能在 Windows 7 上的 IE11 中不受支持。

此功能由 Windows 直接操作 API 提供,但通过一系列 CSS 属性和 DOM 属性与方法(如 msContentZoomFactormsZoomTo)对你的网页和应用公开。使用“直接操作”,系统会处理触摸输入并在委托线程中提供内置交互反馈动画,从而释放 UI 线程以响应 Web 应用的脚本和脚本驱动的动画。

msZoomTo 方法

新的 msZoomTo 方法使用动画滚动和/或缩放元素至其指定的坐标。它提供了简单的高性能方法来在网站中和使用 JavaScript 的 Windows 应用商店应用中实现动画滚动导航并取得系统性缩放效果。 在使用 JavaScript 的 Windows 应用商店应用中,此方法用于 FlipView 控制、“应用栏”和分页方案。

例如,可以使用 msZoomTo 放大元素,同时保持其在视区中居中:


var args = {
    contentX: target.offsetLeft + target.offsetWidth/2;
    contentY: target.offsetTop + target.offsetHeight/2;
    scaleFactor: 2.0;
}
zoomer.msZoomTo(args); 


对在输入设备上滚动、平移和缩放进行微调

IE11 支持对 CSS 和 DOM 属性使用更多输入类型来微调在 Windows 8 上的 Internet Explorer 10 中引入的通过触摸滚动和缩放。特别是,已为 IE11 添加以下支持:

  • 鼠标、键盘以及触摸板的滚动/平移吸附点支持
  • 滚动轨道并缩放链接、限制以及触摸板交互的吸附点支持

如果你已经在使用这些属性,则 IE11 中添加的这项支持应该无需对现有代码进行任何更改即可正常起作用。

以下是输入方法和版本的自定义滚动和缩放属性支持的摘要:

滚动/缩放属性触摸屏触摸板鼠标键盘
-ms-scroll-snap-points-x-ms-scroll-snap-points-y-ms-scroll-snap-type-ms-scroll-snap-x-ms-scroll-snap-y IE10+IE11IE11IE11
-ms-content-zoom-chainingmsContentZoomFactor-ms-content-zooming-ms-content-zoom-limit-ms-content-zoom-limit-max-ms-content-zoom-limit-min-ms-content-zoom-snap-ms-content-zoom-snap-points-ms-content-zoom-snap-type-ms-scroll-chaining-ms-scroll-rails IE10+IE11----
-ms-overflow-style-ms-scroll-limit-ms-scroll-limitXMax-ms-scroll-limitXMin-ms-scroll-limitYMax-ms-scroll-limitYMin IE10+IE10+IE10+IE10+
-ms-scroll-translation ----IE10+--

 

相关主题

msZoomTo
IE10 开发人员指南:通过触摸进行滚动和缩放
IE11:面向现在和未来的 Web 触摸浏览
通过触摸输入进行滚动、平移和缩放的示例
Touch: Zooming and Panning (API Reference)

 

 

显示:
© 2015 Microsoft