-ms-scroll-chaining property

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 Tonon-replaced block-level elements and non-replaced inline-block elements
Mediainteractive
Inheritedno
Initial Valuechained

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.

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.


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


See also

CSSStyleDeclaration
Windows Store apps using JavaScript Samples: HTML scrolling, panning and zooming sample
Internet Explorer Samples: Scrolling, panning, and zooming with touch input

 

 

Show:
© 2014 Microsoft