Scrolling and zooming with touch and other inputs

Internet Explorer 11 on Windows 8.1 builds on the fine-tuned control of scrolling and zooming with touch introduced with Internet Explorer 10 and Windows Store apps on Windows 8 by adding support for other input types (such as touchpad, mouse, and keyboard) and with a new method for animated scrolling and zooming effects..

Important  This feature is not supported in IE11 on Windows 7.

This functionality is provided by the Windows Direct Manipulation API, but it’s exposed to your webpages and apps through a series of CSS properties and DOM properties and methods (like msContentZoomFactor and msZoomTo). With Direct Manipulation, the system processes touch input and provides built-in interaction feedback animations in a delegate thread, freeing up the UI thread to respond to your web app’s scripts and script-driven animations.

The msZoomTo method

The new msZoomTo method scrolls and/or zooms an element to its specified coordinate using animation. It provides an easy and performant way to implement animated scrolling navigation and to achieve semantic zooming effects in your websites and Windows Store apps using JavaScript. In Windows Store apps using JavaScript, this method is used for the FlipView control, the app bar, and pagination scenarios.

For example, you can use msZoomTo to zoom in on an element while still keeping it centered in the viewport:

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

Fine-tuned scrolling, panning, and zooming across input devices

IE11 supports additional input types for the CSS and DOM properties for fine-tuned scrolling and zooming with touch introduced in Internet Explorer 10 on Windows 8. Specifically, the following support has been added for IE11:

• Scrolling / panning snap point support for mouse, keyboard, and touchpad
• Scroll rails and zoom chaining, limits, and snap point support for touchpad interaction

If you already use these properties, this added support in IE11 should work without any changes to your existing code.

Here’s a summary of custom scrolling and zooming property support across input methods and versions:

Related topics

msZoomTo

IE10 Dev Guide: Scrolling and zooming with touch

IE11: Touch Browsing for Today’s Web and Beyond

Scrolling, panning, and zooming with touch input sample

Touch: Zooming and Panning (API Reference)