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

Question

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

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

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

Here is a JS Bin为了您的方便。谢谢。

Answer 1

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