javascript - 我可以禁用 IE10 历史滑动手势吗？

Question

我有一个使用触摸平移的 Surface Web 应用程序(容器 div 具有“溢出:自动”样式)并且我正在使用内置的分页滚动样式:

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

我的应用有一个 300% 宽度的子容器，导致 3 个页面在页面边界上对齐。

这对于高性能分页滚动非常有用，除非用户在第一页并向右滑动，这会激活浏览器的内置后退手势，退出我的网络应用程序并进入用户的 IE10 历史记录.

我可以使用以下方法禁用返回手势:

-ms-touch-action: none;

但这也会禁用触摸滚动，因此页面不再可拖动。如果我使用:

-ms-touch-action: pan-x;

然后滚动再次起作用，但浏览器后退手势再次出现，这是一种非常烦人的用户体验。有没有办法允许平移但不允许历史手势？

Answer 1

解决方案很简单，你只需要添加一个 CSS 样式，防止滚动行为从已经达到滚动限制的子元素冒泡到父元素(滚动最终变成顶级历史导航) .

文档 ( http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx) 声明默认值为:

-ms-scroll-chaining: none;

但是默认值看起来确实是:

-ms-scroll-chaining: chained;

我将该样式默认设置为无，并链接到轮播中真正应该链接的元素，这在我的应用程序中禁用了历史导航手势:

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

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