-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.

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

Values

chained

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

none

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

Formal syntax

  chained | none

Examples

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;
}

Specifications

Not part of any specification.

Remarks

This property only applies to touch and touchpad input. For keyboard input the scroll does not chain regardless of the –ms-scroll-chaining value, 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: chrisdavidmills, jameshkramer
 Last updated by: chrisdavidmills,