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

问题描述 投票:0回答:1

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

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

((请注意,这是一个移动问题,尤其是在iOS上使用浏览器,在iOS上也使用chrome)

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

这里是演示:https://unfjl.csb.app/

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

什么可能导致这种行为?

更新(无iframe示例)

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

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

reactjs mobile-safari draggable touch-event gsap
1个回答
0
投票

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

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

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

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

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

浏览器错误很有趣,不是吗? ;)

(最初在https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225的GreenSock论坛中回答)

热门问题
推荐问题
最新问题