在 Metro IE 中禁用导航滑动答案

【问题标题】：Disable Navigation Swipe in Metro IE在 Metro IE 中禁用导航滑动
【发布时间】：2013-10-06 22:19:50
【问题描述】：

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

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

所以我想在 html 元素上添加 -ms-scroll-chaining: none ，但它仅在元素滚动时才有效。因此，在 html 上添加溢出：滚动实际上可以解决问题。但是现在我的其他浏览器上显示了滚动条。

这样做的正确方法是什么？

    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 */
    }

【问题讨论】：

控制人们的浏览器并尝试禁用特定功能并不是一个好主意。尤其是像导航和历史这样的。但我可以告诉你，你可以在 javascript 中查看 HTML5 的历史 API 并检测导航事件。

标签： css internet-explorer microsoft-metro

【解决方案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; 
    }
}

【讨论】：

【解决方案2】：

你试过了吗

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

并且对于每个可以滚动的类（Y轴）应用

-ms-scroll-chaining: none;

在我的项目中，我们有专门的类来滚动舒适的内容：

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

为我工作

【讨论】：

这太拘束了。我仍然希望 -ms-scroll-chaining 在我的元素上工作。链接在网站上既好又重要。