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

【问题标题】：Draggable element in iframe on mobile is buggy移动设备上 iframe 中的可拖动元素有问题
【发布时间】：2019-09-29 21:59:39
【问题描述】：

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

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

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

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

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

什么可能导致这种行为？

更新（无 iframe 示例）

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

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

【问题讨论】：

【解决方案1】：

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

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

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

您还可以添加一个 touchforcechange 监听器来阻止默认行为（我也会将它添加到 Draggable 本身）：

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

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

【讨论】：