Question

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

在我的情况下，我总共有24个物体的图像，这意味着每张图片之间有15度的角度差异。现在我正试图让旋转更顺畅。如果我使用鼠标，它可以在任何浏览器上完美运行。但是，如果我使用触摸屏代替Microsoft Edge等浏览器，事情就会出现问题。

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

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

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

如何使用Javascript / JQuery修复此问题？

Answer 1

使用CSS可以为我工作

我用过

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

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

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

1 个答案: