iframe上移动设备上的可拖动元素是越野车

Question

我正在创建第三方应用程序，该应用程序通过iframe加载。iframe在其旁边创建可拖动元素。

在第一页加载时（滚动页面之前），可拖动（滑块）工作正常。但是，在将页面滚动到iframe后面之后，很难使滑块再次滑动。

（（请注意，这是一个移动问题，尤其是在iOS上使用浏览器，在iOS上也使用chrome）

在下面的演示中，我将GSAP Draggable库与react一起使用来创建可拖动元素，但也尝试将其编码为无反应的简单反应。

我尝试了很多不同的东西（css，touchevents等），但无法使其正常工作...

什么可能导致这种行为？

更新（无iframe示例）

无iframe演示：https://p5cu9.csb.app/

与上述滑块相同的示例，但是在此示例中，可拖动对象直接在DOM中呈现，而不在iframe中呈现。仍然出现问题。我怀疑这与滑块的固定CSS位置有关...

Answer 1

这听起来真的很奇怪，但是iOS Safari中的错误会导致这种情况，而我所知解决这个问题的唯一方法（我今天通过Googling发现）是在顶部的“”中添加“ touchstart”监听器，级别页面（不是iframe）！

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

这不是我可以添加到Draggable的东西，因为它无法访问父文档（在iframe之外）以正确地添加它（浏览器中的安全性限制）。

您还可以添加一个touchforcechange侦听器，以防止默认行为（我也将其添加到Draggable本身：]]

yourDraggableElement.addEventListener("touchforcechange", function(event) {
  event.preventDefault();
});
浏览器错误很有趣，不是吗？ ;）