-ms-scroll-chaining property (Windows)

4 out of 5 rated this helpful - Rate this topic

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 has no effect on non-scrollable elements.

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

CSS


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

-ms-scroll-chaining property

Syntax

Property values

CSS information

Remarks

Examples

See also