-ms-scroll-chaining

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-chaining CSS property is a Microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.

This property is read/write.

Initial valuechained
Applies tonon-replaced block-level elements and non-replaced inline-block elements
Inheritedno
Mediainteractive
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The -ms-scroll-chaining property is specified as one of the following.

Values

chained

Initial value. The nearest scrollable parent element begins scrolling when the user hits a scroll limit during a manipulation. No bounce effect is shown.

none

A bounce effect is shown when the user hits a scroll limit during a manipulation.

Formal syntax

chained | none

Example

The following example illustrates the -ms-scroll-chaining property in use. In this case, the image container has its -ms-scroll-chaining property set to "chained", which means that, when a user is scrolling through a nested scrollable element and it hits its boundary, the parent scrollable element will begin to scroll in the same direction. Had the -ms-scroll-chaining property been set to "none", the user would observe a bounce effect when the nested element reaches its boundary. For more information, see HTML scrolling, panning and zooming sample or Internet Explorer 10 Scrolling, panning, and zooming with touch.

.imageContainer {
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  width: 480px;
  height: 270px;
  overflow: auto;
}

Specification

Not part of any specification.

Remarks

This property only applies to touch and touchpad input. Regardless of –ms-scroll-chaining value, for keyboard input the scroll does not chain, and for mouse input the scroll will always chain up to the nearest scrollable ancestor element.

This property has no effect on non-scrollable elements.

This property requires Windows 8 or later.

Document Tags and Contributors

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