如何使用 javascript 或 jQuery 在 Microsoft Edge 中禁用“滑动返回”？答案

【问题标题】：How to disable "swipe to go back" in Microsoft Edge with javascript or jQuery?如何使用 javascript 或 jQuery 在 Microsoft Edge 中禁用“滑动返回”？
【发布时间】：2017-11-26 11:10:57
【问题描述】：

我目前正在开发一个具有对象水平旋转功能的网站。所以假设你看到的第一张图片是物体的正面，然后第二张图片是侧面，第三张是背面，第四张是另一边，第五张是正面。

在我的例子中，我总共有 24 张物体的图像，这意味着每张照片之间有 15 度的角度差异。现在我正在努力使旋转更顺畅。如果我使用鼠标，它可以在任何浏览器上完美运行。但是，如果我将触摸屏用于 Microsoft Edge 等浏览器，事情就会开始出错。

Edge 的问题是，如果我尝试向右滑动对象，它会以某种方式触发 Edge 中的“返回上一页”功能。当我使用 Chrome 时，我可以用简单的 javascript 代码来解决这个问题。代码如下所示：

        $(".reel-holder").bind('touchstart', function(event) {
                event.preventDefault();
                event.stopPropagation();
        });

在 Edge 上滑动时的另一个问题是，旋转是按图片旋转的。无论我如何在触摸屏上滑动，它都只会转到下一张/上一张图片。

如何用 Javascript/JQuery 解决这个问题？

这是鸡蛋

【问题讨论】：

您需要向我们展示您拥有的东西。如果没有console.log() 和console.trace() 的能力，我们将无能为力。请创建一个minimal reproducible example。

标签： javascript jquery ios css microsoft-edge

【解决方案1】：

这可以通过touch-action CSS 属性来实现。对于要阻止 Edge 处理其手势的每个元素，将 touch-action 设置为 none。或者，您可以将 touch-action 设置为 none 在一个共同的祖先上，或者，如果您想阻止 Edge 处理任何手势，请将其设置在 body 上。

如果您只想阻止 Edge 通过滑动返回上一页，但希望 Edge 处理其他手势，则可以将 touch-action 设置为 pan-right pan-y pinch-zoom。

例子：

.reel-holder {
    touch-action: none;
}

【讨论】：

不知道为什么这个答案被否决了。 touch-action 是您控制行为的方式。
@cleong 谢谢，我也不明白。唯一可能引起混淆的是我在编辑之前提到了“浏览器”而不是“Edge”，所以反对者可能认为我的意思是它适用于所有主要浏览器。

【解决方案2】：

使用 CSS 这对我有用

我用过

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overscroll-behavior: contain;    
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

【讨论】：