We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

-ms-scroll-translation

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 valuenone
Applies toall elements
Inheritedyes
Mediainteractive
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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.

Document Tags and Contributors

Contributors to this page: jameshkramer
Last updated by: jameshkramer,