-ms-scroll-translation property

Specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element.

This property is read/write.

 

Syntax

-ms-scroll-translation: vertical-to-horizontal | none | inherit

Property values

One of the following keywords.

• vertical-to-horizontal
  Vertical to horizontal translation, as described in Remarks, will take place when appropriate.

• none
  No scroll wheel translation takes place.

• inherit
  Initial value. Value is inherited from the element's parent element.

CSS information

Applies To	All elements
Media	interactive
Inherited	true
Initial Value	inherit

Remarks

This property has no effect on non-scrollable elements.

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, not horizontal scroll events. Similarly, the events that occur when the user scrolls horizontally will always be horizontal scroll events. This property enables you to change this behavior for vertical scroll events. By setting the -ms-scroll-translation property to vertical-to-horizontal, you are specifying that vertical scroll events should be interpreted as their corresponding horizontal scroll events.

This property's initial value is inherit on all elements, except the html element, where it defaults to none.

This property has no effect on keyboard interaction.

The default Cascading Style Sheets (CSS) templates for Windows apps using JavaScript, "ui-light.css" and "ui-dark.css", set this property to vertical-to-horizontal by default on the html element.

This property requires Windows 8 or later.

See also

CSSStyleDeclaration

Windows apps using JavaScript Samples: HTML scrolling, panning and zooming sample

Internet Explorer Samples: Scrolling, panning, and zooming with touch input