当鼠标悬停在嵌入式iframe上时，防止父页面滚动 [英] Prevent parent page from scrolling when mouse is over embedded iframe

问题描述

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

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

I have a google-map-like widget that can be embedded in 3rd party websites in the form of an iframe embed code. When people use mouse wheel over my widget I want only the content of the widget to scroll and not the parent page.

我的问题类似于 如何在滚动DIV元素时阻止页面滚动？ 但我的问题是我的ifrmae包含多个元素，包括必须继续听鼠标的媒体和画布车轮事件。 TLDR解决方案使用 e.preventDefault（）并手动更新iframe中应该保持可滚动的所有元素的 scrollTop 属性是不切实际的，容易出错且依赖于非-standard wheelDelta 属性。

My question is similar to How to prevent page scrolling when scrolling a DIV element? but my problem is that my ifrmae contains multiple elements including media and canvas that must keep listening to mouse wheel event. TLDR the solution to use e.preventDefault() and manually update the scrollTop property of all elements inside the iframe that should stay scrollable is impractical, error prone and dependent on the non-standard wheelDelta property.

这是一个JS Bin 。谢谢。

推荐答案

在 iframe 内滚动时， body 对那里发生的事情一无所知。但是当 iframe 滚动到达底部或顶部时，它会滚动到正文。
请参阅我的 jsFiddle 和控制台日志。

While scrolling inside an iframe, the body doesn't know anything about what happens there. But when iframe scroller reach the bottom or the top, it pass scrolling to body. See my jsFiddle and console log there.

这篇关于当鼠标悬停在嵌入式iframe上时，防止父页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！