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

Question

我们使用的是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 中滚动/滑动不会切换幻灯片。

Answer 1

你可以试试这个 CSS 解决方案：

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

元素在哪里，您将放置 vimeo 嵌入类/ID。我还没有对此进行测试，但是我遇到了类似的问题，因为滑动动作窃取了滚动动作。希望它对您的情况也有帮助。