如何禁用Iframe中的鼠标滚轮交互

Question

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

我们将内容呈现在窗口的全宽度下，但可以在下方补充其他内容。这种全宽度呈现方法有时会为用户创建问题，当浏览器窗口的位置使交互内容填满整个视口时，他们无法向下滚动/滑动页面，越过“运行”模型。

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

谢谢

- S.Tijssen

Answer 1

您可以通过在iframe上方放置一个透明的覆盖层来实现这一点，当用户积极尝试与iframe交互（例如点击）时，才允许鼠标事件传递到iframe。

遮罩可以非常简单，只需

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

它将阻止鼠标滚轮事件，直到被点击为止。

此外，对于archilogic模型，还有一个url参数autostart=false，它会暂停模型，直到你点击播放按钮。

- Benjamin

---

很抱歉，这种方法并不能真正解决所描述的问题。一旦一个archilogic模型“运行”起来，你仍然可能会（在越来越多的设备上，特别是那些运行iOS的设备上）被“卡住”。在这些情况下，就没有办法访问父窗口的滚动条，以便移动到嵌入<iframe>的页面的其余部分，超过交互内容。 - Ross

请注意，Matterport嵌入时存在相同的问题，但通过其“wh=0”参数完美解决。他们描述功能如下：忽略鼠标滚轮输入。 滚轮输入会导致整个网页上下移动。 当使用iframe嵌入空间时，此参数才有效。希望Archilogic考虑类似的选项。 - Ross

你说得完全正确，出于几个原因，这不是一个好的解决方案。我不确定url参数的状态，但Archilogic正在开源其前端...因此，像这样的修改很快就会变得非常可能。 - Benjamin

谢谢Benjamin...你有关于Archilogic转换为开源前端的时间表吗？ - Ross

由于已经有一个运行良好的测试版，因此它将在不久的将来推出。以下是观看的网址：https://3d.io。 - Benjamin