Scrolling and zooming with touch

[アーティクル]
11/03/2017

Note The properties described in this section are not supported in Windows 7.

Two key components of touch interactions are scrolling (or panning) and zooming. Touch-enabled webpages and applications use scrolling and zooming to enable users to access more content, move through items in a list, view more detail in a photo, and much more.

When you need to know more about what the user is doing, you use the pointer and gesture events, which are described in detail in Pointer and gesture events. This article covers the methods you can use to control the scrolling and zooming views of your touch-optimized webpage in Internet Explorer 10 or your Windows app using JavaScript in Windows 8.

Aspects you can control

Scrolling and zooming views are a quintessential experience when it comes to touch. Users base their first opinions of your webpage or app depending on what happens when they first touch the screen and slide their fingers across. Keeping this in mind, there are many details and nuances to get right to provide a great experience.

General interactions that your users expect to "just work" include:

Scrolling (or panning) content by touching the screen, and then sliding the finger to reveal more content
Zooming the screen image by pinching the screen to zoom out and pinching in reverse to zoom in, or by double-tapping a top-level element (Internet Explorer in the new Windows UI only)
Inertia that continues scrolling content in a predictable way after the user's finger leaves the screen
Content areas that bounce when the area being scrolled reaches the edges
Scrolling or zooming areas that are nested inside other scrolling or zooming areas, and that behave as users expect
Snap points that, when applied to key locations, make it easy for users to get to those locations when scrolling or zooming
Controls that integrate seamlessly with scrolled or zoomed content; buttons and other interface elements within content respond as expected, without triggering scroll or zoom behavior

Thankfully, both Internet Explorer 10 and Windows apps using JavaScript in Windows 8 have these capabilities built in. However, you can fine-tune many of these interactions using several new Cascading Style Sheets (CSS) properties.

Controlling scrolling behavior

You can control scrolling behavior with the CSS properties described in this section.

Note View working sample code that incorporates these properties in Scenario 1: Panning – Controlling what the user can pan, in the Scrolling, panning, and zooming with touch input sample from the Internet Explorer Samples Gallery on MSDN.

Controlling the scrollable area

With the following CSS properties, you can control the size of the area that can be scrolled. These properties have no effect on elements that can't be scrolled.

Property	Description
-ms-scroll-limit	Shorthand property that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max, and -ms-scroll-limit-y-max properties.
-ms-scroll-limit-x-max	Specifies the maximum value for the scrollLeft property.
-ms-scroll-limit-x-min	Specifies the minimum value for the scrollLeft property.
-ms-scroll-limit-y-max	Specifies the maximum value for the scrollTop property.
-ms-scroll-limit-y-min	Specifies the minimum value for the scrollTop property.

Controlling scrolling methods

You can control the scrolling methods for elements that overflow—a classic scrollbar, an auto-hiding scrollbar, or nothing—using this CSS property.

Property	Description
-ms-overflow-style	Specifies the preferred scrolling methods for elements that overflow.

Indicating scroll rails

With this CSS property, you can control whether scrolling locks to the axis of motion—vertical or horizontal—or follows the user's finger exactly, effectively allowing free-form scrolling.

Property	Description
-ms-scroll-rails	Indicates whether scrolling will lock to the primary axis of motion.

Translating scroll wheel movement

If your JavaScript is listening for scroll wheel Document Object Model (DOM) events, the events that occur when the user scrolls vertically will always be vertical scroll events, and not horizontal scroll events. Similarly, the events that occur when the user scrolls horizontally will always be horizontal scroll events.

You can use the following CSS property to change this behavior for vertical scroll events.

Property	Description
-ms-scroll-translation	Specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element. A value of vertical-to-horizontal indicates that vertical scroll events should be interpreted as their corresponding horizontal scroll events, while a value of none indicates that no scroll wheel translation takes place.

Controlling zooming behavior

You can control zooming behavior by using the CSS properties described here.

Note View working sample code that incorporates these properties in Scenario 3: Zooming – Letting the user zoom an element's content, in the Scrolling, panning, and zooming with touch input sample from the Internet Explorer Samples Gallery on MSDN.

Enabling zoom

Use the following property to specify whether zooming should be enabled for a given element. This property has no effect unless overflow is permitted on both the x- and y-axes.

Property	Description
-ms-content-zooming	Indicates whether zooming is enabled.

Controlling the zoom factor

With these CSS properties, you can control the degree to which an element can be zoomed. These properties have no effect on elements that can't be zoomed.

Property	Description
-ms-content-zoom-limit	Shorthand property that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.
-ms-content-zoom-limit-max	Specifies the maximum zoom factor.
-ms-content-zoom-limit-min	Specifies the minimum zoom factor.

The preceding properties specify the zoom factor by setting the following DOM property:

Property	Description
msContentZoomFactor	Indicates the content zoom factor.

Specifying behaviors of nested scrolled or zoomed content

After a user hits a zoom or scroll limit on an element that has been nested within another zoomable or scrollable element, you can specify whether that parent element should continue the zooming or scrolling operation begun in its child element. This is called zoom or scroll chaining.

Note View working sample code that incorporates these properties in Scenario 4: Chaining – Putting them together, in the Scrolling, panning, and zooming with touch input sample from the Internet Explorer Samples Gallery on MSDN.

Specifying chaining behavior

You can specify chaining behavior with these CSS properties. These properties have no effect on elements that can't be zoomed or scrolled, respectively.

Property	Description
-ms-content-zoom-chaining	Indicates the zoom behavior that occurs when a user hits the zoom limit during a manipulation.
-ms-scroll-chaining	Indicates the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.

Determining default touch behavior

Using the CSS property described here, you can determine the behavior that is permitted when a user touches an element—for instance, scrolling or zooming. The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.

If a default touch behavior isn't invoked, DOM events will be fired for that contact instead (see Pointer and gesture events).

Note View working sample code that incorporates these properties in Scenario 5: Touch Actions – Getting events inside pan/zoom elements, in the Scrolling, panning, and zooming with touch input sample from the Internet Explorer Samples Gallery on MSDN.

Property	Description
-ms-touch-action	Indicates whether and how a given region can be manipulated by the user. The possible values for this property include the following: auto Initial value. Indicates the browser will determine the permitted touch behaviors for the element. none The element permits no default touch behaviors. pan-x The element permits touch-driven panning (scrolling) on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content. pan-y The element permits touch-driven panning (scrolling) on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content. pinch-zoom The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content. manipulation The element permits touch-driven scrolling and pinch-zooming. This is the shorthand equivalent of "pan-x pan-y pinch-zoom". double-tap-zoom The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows apps using JavaScript.

-ms-touch-action

Indicates whether and how a given region can be manipulated by the user.

The possible values for this property include the following:

auto Initial value. Indicates the browser will determine the permitted touch behaviors for the element.
none The element permits no default touch behaviors.
pan-x The element permits touch-driven panning (scrolling) on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y The element permits touch-driven panning (scrolling) on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.
manipulation The element permits touch-driven scrolling and pinch-zooming. This is the shorthand equivalent of "pan-x pan-y pinch-zoom".
double-tap-zoom The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows apps using JavaScript.

Consider the example of a finger-painting application or webpage. In such an instance, it's important that the canvas doesn't move when a user touches and manipulates it. When the following code example is included in the page's CSS and a user touches this canvas and moves his or her finger, no manipulation occurs. DOM events will be sent instead.

canvas#fingerpainter {
  -ms-touch-action: none;
}

Now consider this next example, which builds a list that pans in the x-direction but allows dragging or rearranging if the user pulls an item in the y-direction (similar to the Windows 8 Start screen). When the user touches a listEntry and moves his or her finger in the x-direction, the list pans. If the user instead moves his or her finger in the y-direction, no pan occurs. DOM events will be sent instead.

div.list {
  overflow-x: scroll;
}

div.list > div.listEntry {
  -ms-touch-action: pan-x;
}

Creating content snap points

When a user scrolls or zooms and then lifts his or her finger(s), the content continues to scroll or zoom with some inertia. You can fine-tune where the content ends up after the inertia finishes by using snap points.

You can apply snap points to key locations in your content so that it's more likely that the key location is viewable after the inertia stops. For instance, apply scroll snap points to a particular heading so that it's more likely that inertial movement will land the reader at that heading when he or she would have otherwise landed somewhere in its vicinity. Or, set zoom snap points to a specific zoom level so that, when a user double-taps to zoom in, the page always snaps to that zoom level.

By placing snap points, you can make it easy for your users to manipulate your content and make your content stop at convenient or key places.

Note View working sample code that incorporates these properties in Scenario 2: Setting and configuring snap-points, in the Scrolling, panning, and zooming with touch input sample from the Internet Explorer Samples Gallery on MSDN.

Scroll snap points

These CSS properties enable you to set scroll snap points on your content. These properties have no effect on elements that can't be scrolled.

Property	Description
-ms-scroll-snap-points-x	Defines where snap points will be located along the x-axis.
-ms-scroll-snap-points-y	Defines where snap points will be located along the y-axis.
-ms-scroll-snap-type	Defines what type of snap point should be used for the current element—a proximity snap point (When normal inertia would leave content near a snap point, inertia is adjusted to land exactly on the snap point; it's still possible, however, to land between snap points.) or a mandatory snap point (Inertia is adjusted to ensure content always lands on a snap point, and will never go past it.).
-ms-scroll-snap-x	Shorthand value that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-x properties.
-ms-scroll-snap-y	Shorthand value that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties.

Content zoom snap points

These CSS properties enable you to set content zoom snap points on your content. These properties have no effect on elements that can't be zoomed.

Property	Description
-ms-content-zoom-snap-type	Indicates how zooming is affected by defined snap points.
-ms-content-zoom-snap-points	Defines where zoom snap points are located.
-ms-content-zoom-snap	Shorthand value that sets values for the -ms-content-zoom-snap-type and the -ms-content-zoom-snap-points properties.