禁用Metro IE中的导航滑动

Question

我想禁用导航滑动。当用户向左或向右滑动时，我不希望网页前进或后退。

我注意到我们可以在html元素上将touch-action设置为none以防止这种行为。但是，当滚动带有一些溢出的子元素时，它将“链接”滚动，然后允许返回导航。

因此，我考虑在html元素上添加-ms-scroll-chaining: none，但仅当元素滚动时才起作用。所以在html上添加overflow: scroll实际上就可以解决问题了。但现在我的其他浏览器上显示了滚动条。

什么是正确的操作方式？

    html {
        -ms-touch-action: none; /* Doesn't work if scrolling from child element */
        -ms-scroll-chaining: none; /* Works only with the next line */
        overflow: scroll; /* With this line all the other browsers have a scrollbar */
    }

- jsgoupil

---

控制他人浏览器并尝试禁用特定功能并不是一个好主意，特别是像导航和历史记录这样的功能。但我可以告诉你，你可以研究一下JavaScript中HTML5的历史API，并检测导航事件。 - CP510

Answer 1

我使用了这个：

@media screen and (-ms-high-contrast: none) {
    // Windows 8+ IE only
    html {
        overflow-x: scroll;
        -ms-touch-action: none; 
        -ms-overflow-style: none;
        -ms-scroll-chaining: none; 
    }
}

- Michael Svinth

Answer 2

你试过了吗？

body, html {
   -ms-touch-action:none;
}

对于每个可滚动的类（Y轴），应用以下样式：

-ms-scroll-chaining: none;

在我的项目中，我们有一个特殊的滚动类，非常方便：

.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    -ms-scroll-chaining: none;
}

对我有用

- Jinx

---

那太过于限制了。我仍然希望-ms-scroll-chaining在我的元素上起作用。在网站上链接是很好和重要的。 - jsgoupil