Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The -ms-scroll-translation CSS property is a Microsoft extension that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element.
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Syntax
Values
vertical-to-horizontal-
Vertical to horizontal translation, as described in Remarks, will take place when appropriate.
none-
No scroll wheel translation takes place.
inherit-
The initial value. The value is inherited from the element's parent element.
Formal syntax
none | vertical-to-horizontal
Specifications
Not part of any specification.
Remarks
This property requires Windows 8 or later.
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 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.