当鼠标悬停在嵌入式 iframe 上时，防止父页面滚动

Question

...不限制 iframe 内的滚动或需要专门命名可滚动元素。

我有一个类似 google-map 的小部件，它可以以 iframe 嵌入代码的形式嵌入到第三方网站中。当人们在我的小部件上使用鼠标滚轮时，我只希望小部件的内容滚动而不是父页面。

我的问题与 How to prevent page scrolling when scrolling a DIV element? 类似，但我的问题是我的 ifrmae 包含多个元素，包括媒体和画布，这些元素必须一直监听鼠标滚轮事件。 TLDR 使用 e.preventDefault() 并手动更新 iframe 内应保持可滚动的所有元素的 scrollTop 属性的解决方案是不切实际的，容易出错并且依赖于非-标准 wheelDelta 属性。

Here is a JS Bin 为您提供方便。谢谢。

Answer 1

在iframe 内滚动时，body 不知道那里发生了什么。但是当iframe 滚动条到达底部或顶部时，它会将滚动传递给正文。 在那里查看我的jsFiddle 和控制台日志。