一个Vimeo<iframe>嵌入劫持滚动/滑动事件

A Vimeo <iframe> embed hijacks scrolling/swiping events

本文关键字：滚动事件劫持 lt Vimeo iframe gt 一个更新时间：2023-09-26

我们使用的是fullPage.js，它提供了类似幻灯片的体验。我们正在将Vimeo iframe嵌入其中一张幻灯片中，该幻灯片应涵盖幻灯片的全部内容。

Chrome中的一切都很有魅力，但在Firefox和iOS中，无法滚动/滑动Vimeo iframe。fullPage对此没有反应。

我试着用一个透明的div覆盖视频。同样，它在Chrome中也能工作，但在iOS上，浏览器不允许你以编程方式启动视频，所以用div覆盖视频会使它无法启动视频：Vimeo播放器说"未捕获的错误：观看者必须首先启动播放。"

这个问题有解决办法吗？

以下是该问题的演示：http://jsbin.com/tunove/1/edit?html，output视频在第二张幻灯片上。在Firefox和iOS中，滚动/滑动它不会切换幻灯片。

您可以尝试以下CSS解决方案：

element {
    touch-action: pan-y !important;
}

在元素所在的位置，您可以放置vimeo嵌入类/id。我还没有测试过这个，但我在其他事情上也遇到过类似的问题，滑动动作偷走了滚动动作。希望这对你的情况也有帮助。