我可以禁用IE10历史记录滑动手势吗？

Question

我有一个使用触摸平移的表面Web应用程序(容器div具有"overflow:auto"样式),我使用内置的分页滚动样式:

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

我的应用程序有一个300%宽度的子容器,导致3页在页面边界上捕捉.

这对于高性能分页滚动的伟大工程,当用户在第一页上,除了和他们向右滑动,激活浏览器内置的回退姿势,离开我的web应用程序,并进入用户的IE10历史.

我可以使用以下方法禁用后退手势:

-ms-touch-action: none;

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

-ms-touch-action: pan-x;

然后滚动再次工作,但浏览器后退手势再次出现,这是一个非常讨厌的用户体验.有没有办法允许平移而不是历史手势？

Answer 1

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

-ms-scroll-chaining: none;

但是默认似乎是:

-ms-scroll-chaining: chained;

我默认情况下将该样式设置为none,并链接到我的旋转木马中真正应该链接的元素,这会禁用我的应用中的历史导航手势:

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

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

Answer 2

您需要设置-ms-touch-action: none;所有元素.

这将改为向JavaScript处理程序激活事件(如果有的话),但会阻止所有新操作,包括:平移,缩放和滑动.如果您想自定义应用程序如何利用触摸,这是最好的.