与 iframe 交互时保持父级滚动

Posted 2023-02-27

【中文标题】与 iframe 交互时保持父级滚动

【英文标题】：Retain parent scrolling when interacting with an iframe

【发布时间】：2022-01-18 19:13:46

【问题描述】：

我想要的用例是：我的 html 页面使用 iframe 嵌入远程视频（例如 Vimeo、YouTube）。我需要滚动以始终与我的父页面保持一致，但允许点击与 iframe 的内容进行交互。

默认浏览器行为是让 iframe 在用户悬停或与 iframe 的内容交互时捕获滚动事件。在 iframe 上设置 pointer-events:none 并不能达到我需要的效果，因为它禁止点击 iframe 以及禁止滚动。

我正在寻找的行为是让 iframe 看起来好像它是我页面上的任何其他资产（如图像）。如果他们不感兴趣，用户可以选择滚动过去，但如果他们有兴趣，他们可以点击并进行交互。但无论如何，滚动或触摸拖动事件会滚动父级，而不是 iframe。

这可能吗，跨域限制怎么办？

【参考方案1】：

您可以将 iframe 内的溢出设置为 none，这将阻止用户在 iframe 内滚动，但允许在主网页上滚动。它还允许用户通过单击继续与 iframe 交互，但阻止滚动。代码：

<iframe src="iframe url" title="myIframe" style="overflow: none"></iframe>

【讨论】：

谢谢，但这并不是我想要的结果。如果用户将鼠标悬停在 iframe 上或与之交互，则滚动事件对父级是不可见的。因此，虽然这确实禁止在 iframe 中滚动，但父级不会滚动。