移动设备上 iframe 中的可拖动元素有问题

Question

我正在创建一个通过 iframe 加载的第三方应用程序。
iframe 在其内部创建一个可拖动元素。

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

（请注意，这是一个移动问题，safari 在 iOS 上，尤其是 ，还有 chrome 在 iOS 上）

在下面的演示中，我使用了带有 React 的 GSAP Draggable 库来创建可拖动元素，但我也尝试过在普通 React 中对其进行编码，但没有成功。

我尝试了很多不同的东西（css、touchevents 等），但无法让它工作...

什么会导致这种行为？

更新（无 iframe 示例）

没有 iframe 的演示：https://p5cu9.csb.app/

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

Answer 1

这听起来真的很奇怪，但是 iOS Safari 中的一个错误导致了这种情况，我知道解决它的唯一方法（我今天通过谷歌搜索发现）是添加一个 "touchstart" 顶级页面（不是 iframe）的监听器！

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

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

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

yourDraggableElement.addEventListener("touchforcechange", function(event) {
  event.preventDefault();
});

浏览器错误很有趣，不是吗？！ ;)

Draggable element in iframe on mobile is buggy