-ms-scroll-chaining property

Article
01/11/2017

Specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.

This property is read/write.

Syntax

-ms-scroll-chaining: chained | none

Property values

Value that indicates the behavior that occurs when a user hits the scroll limit.

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.

CSS information

Applies To	non-replaced block-level elements and non-replaced inline-block elements
Media	interactive
Inherited	no
Initial Value	chained

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.

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 Windows apps using JavaScript Samples: HTML scrolling, panning and zooming sample or Internet Explorer Samples: Scrolling, panning, and zooming with touch input.

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

Share via