我目前正在开发一个具有对象水平旋转功能的网站。假设您看到的第一个图像是物体的正面，然后第二个图像是侧面，第三个图像是背面，第四个图像是另一侧，第五个图像是正面。
就我而言，我总共有 24 张对象图像，这意味着每张图片之间存在 15 度角差。现在我正在尝试使旋转更平滑。如果我使用鼠标，它可以在任何浏览器上完美运行。但是，如果我将触摸屏用于 Microsoft Edge 等浏览器，事情就会开始出错。
Edge 上的问题是，如果我尝试向右滑动对象，它会以某种方式触发Edge 中的“返回上一页”功能。当我使用Chrome时，我可以用简单的 javascript 代码解决这个问题。代码如下所示：
$(".reel-holder").bind('touchstart', function(event) {
event.preventDefault();
event.stopPropagation();
});
在Edge上滑动时的另一个问题是，旋转是按图片旋转的。无论我如何在触摸屏上滑动，它都只会转到下一张/上一张图片。
如何使用 Javascript/JQuery 解决此问题？
这可以通过touch-actionCSS 属性来实现。对于您想要阻止 Edge 处理其手势的每个元素，设置touch-action为none。或者，您可以在共同祖先上设置touch-action为none，或者，如果您想阻止 Edge 处理任何手势，请将其设置在body.
如果您只想通过滑动阻止Edge返回上一页，但希望Edge处理其他手势，则可以设置touch-action为pan-right pan-y pinch-zoom。
例子：
.reel-holder {
touch-action: none;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句