Question

I have a surface web app that uses touch panning (container divs have “overflow: auto” style) and I’m using the built-in paging scroll styles:

-ms-scroll-snap-points-x: snapInterval(0px, 1366px);
-ms-scroll-snap-type: mandatory;

My app has a 300% width child container resulting in 3 pages that snap on page boundaries.

This works great for high-performance paging scrolling, except when the user is on the first page and they swipe to the right, which activates the browser’s built-in back gesture, exiting my web app and going into the user’s IE10 history.

I’m able to disable the back gesture using:

-ms-touch-action: none;

But that also disables touch scrolling so the page is no longer draggable. If I use:

-ms-touch-action: pan-x;

Then the scrolling works again but the browser back gesture reappears which is a really annoying user experience. Is there a way to allow panning but not the history gesture?

Answer 1

The solution is simple, you just need to add a CSS style that prevents scroll behavior from bubbling up from child elements that have reached their scroll limit, to parent elements (where the scroll eventually turns into a top-level history navigation).

The docs (http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx) state that the default is:

-ms-scroll-chaining: none;

However the default appears to really be:

-ms-scroll-chaining: chained;

I set that style to none by default and chained on the elements in my carousel that really should be chained, which disabled history navigation gestures in my app:

* {
    -ms-scroll-chaining: none;
}

.carousel * {
    -ms-scroll-chaining: chained;
}