iframe - 如何在 Iframe 中禁用鼠标滚轮滚动交互

Question

我是一名开发人员，致力于将 Archilogic 内容（目前仅嵌入 Iframe）集成到我的 WordPress 插件中。

我们以窗口的全宽显示内容，但可以在下面补充其他内容。当浏览器窗口的位置使得交互式内容填满整个视口时，这种全角呈现方法有时会给用户带来问题。在这种情况下，他们不可能滚动/向下滑动页面，越过“运行”模型。

是否可以（通过 URL 参数）禁用特定嵌入上的“鼠标滚轮”交互？

谢谢

Answer 1

One way you could achieve this is by positioning a transparent overlay on top of the iframe, and when the user actively tries to interact with the iframe (for example by click), only then would you allow the mouse events to go through to the iframe.

The mask could be as simple as

<div onclick="style.pointerEvents='none'"></div>

It will block the mousewheel events until it has been clicked.

There's also the url parameter for archilogic models autostart=false which pauses the model until you hit play