我有一个使用触摸平移的表面网络应用程序（容器 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;
然后滚动再次起作用，但浏览器返回手势再次出现，这是一个非常烦人的用户体验。有没有办法允许平移但不允许历史手势？
【问题讨论】：
标签： javascript css internet-explorer-10
解决方案很简单，你只需要添加一个 CSS 样式来防止滚动行为从达到滚动限制的子元素冒泡到父元素（滚动最终变成顶级历史导航） .
文档 (http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx) 声明默认为：
-ms-scroll-chaining: none;
然而默认值似乎真的是：
-ms-scroll-chaining: chained;
默认情况下，我将该样式设置为 none，并链接在我的轮播中真正应该链接的元素上，这会在我的应用中禁用历史导航手势：
* {
-ms-scroll-chaining: none;
}
.carousel * {
-ms-scroll-chaining: chained;
}
【讨论】：
您需要在所有元素上设置-ms-touch-action: none;。
这将改为向您的 JavaScript 处理程序触发事件（如果有），但会阻止所有新操作，包括：平移、缩放和滑动。如果您想定制您的应用如何利用触控，这是最好的选择。
【讨论】：
不是一个理想或优雅的解决方案，但您可以使用 MSPointerDown、MSPointerMove 和 MSPointerUp 事件侦听器来检测滑动和 preventDefault？
// Touch events
target.addEventListener('MSPointerDown', callback);
target.addEventListener('MSPointerMove', callback);
target.addEventListener('MSPointerUp', callback);
【讨论】：
编辑：以下不阻止滑动导致 Windows Phone 8.1 上的导航，尽管它确实阻止了我在 Windows 8.1 平板电脑上的滑动导航。在这里留下答案，因为它可能对某人有部分用处。
如果您的页面大于视口（触摸平移），则以下 CSS 有效（编辑：仅适用于 8.1 平板电脑）：
html {
-ms-scroll-chaining: none;
}
如果您的页面小于视口（即页面不可滚动/平移，例如缩小），则上述方法不起作用。
但对我来说，类似于以下工作的代码（编辑：仅在 8.1 平板电脑上）：
CSS：
html.disable-ie-back-swipe {
overflow: scroll;
-ms-scroll-chaining: none;
}
JavaScript：
if (navigator.msMaxTouchPoints) {
if (/Windows Phone/.test(navigator.userAgent)) {
document.documentElement.classList.add('disable-ie-back-swipe');
} else {
try {
var metroTestElement = document.createElement('div');
metroTestElement.style.cssText = 'position:absolute;z-index:-1;top:0;right:0;bottom:-10px;width:1px';
document.body.appendChild(metroTestElement);
if (Math.round(window.outerWidth - metroTestElement.offsetLeft) === 1) {
document.documentElement.classList.add('disable-ie-back-swipe');
}
document.body.removeChild(metroTestElement);
} catch (e) { // window.outerWidth throws error if in IE showModalDialog
}
}
}
JavaScript 注释：
navigator.msMaxTouchPoints 会检查这是 IE10/IE11 以及设备是否使用触控。编辑 2：此 IE 功能称为“向前翻转”。企业可以使用组策略禁用它 - 请参阅 http://www.thewindowsclub.com/enable-disable-flip-feature-internet-explorer-10
【讨论】：
在我正在处理的一个项目中正是需要这个，但需要在某些区域滚动（不仅仅是一般滚动，而是溢出）。似乎以下确实有效，在 Lumia 930 上的 IE11（Metro）Surface 2 和 IE11 WinPhone 上进行了测试。也可以使用触摸鼠标进行水平滚动。
请在此处查看此演示：http://jsbin.com/fediha/1/edit?html,css,output
禁用历史回退/前进的技巧）似乎是在任何元素上禁用“pan-x”，除了您想要水平滚动的元素。摘自 CSS：
* {
/* disallow pan-x! */
touch-action: pan-y pinch-zoom double-tap-zoom;
/* maybe add cross-slide-x cross-slide-y? */
}
.scroller-x,
.scroller-x * {
/* horizontal scrolling only */
touch-action: pan-x;
}
.scroller-y,
.scroller-y * {
/* vertical scrolling only */
touch-action: pan-y;
}
在极少数情况下仍会触发历史回溯，但这确实很少见（只能通过在平板电脑上疯狂轻弹才能做到这一点，即使这样也不会只是有时会发生）。
touch-action 仅适用于 IE11，在 IE10 上您需要 -ms-touch-action，但 IE10 已不再使用那么多，而且我没有测试设备。
【讨论】：