编辑:以下内容不能阻止在 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 并且设备使用触摸。
- 编辑:检测 Windows Phone 并设置 disable-ie-back-swipe 但 CSS 实际上并未禁用 Windows Phone 8.1 ARRRGH 上的功能。
- MetroTestElement 测试现代(现代没有滚动条,所以右边是 1 像素,而桌面有滚动条,所以右边是 18 像素左右,具体取决于滚动条的宽度)。
- 如果使用 IE11 和现代,该代码仅禁用向后滑动。
- 似乎 html 或 body 都可以用于 CSS 规则,我不确定哪个实际上更好(恕我直言,我通常认为 body 是页面而不是可滚动的,而 html 是视口/窗口,但实际上取决于IE 实现细节)。
编辑 2:此 IE 功能称为“向前翻转”。企业可以使用组策略禁用它 - 请参阅http://www.thewindowsclub.com/enable-disable-flip-feature-internet-explorer-10