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

...不限制iframe中的滚动或需要专门命名可滚动元素。当鼠标悬停在嵌入式iframe上时，防止父页面滚动

我有一个谷歌地图般的小部件，可以嵌入到iframe嵌入代码形式的第三方网站。当人们在我的小部件上使用鼠标滚轮时，我只想要小部件的内容滚动而不是父页面。

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

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

来源

2015-05-27 daniel.sedlacek

在iframe内滚动时，body不知道发生了什么。但是当滚动条到达底部或顶部时，它将滚动到身体。请参阅我的jsFiddle和控制台日志。

来源

2015-05-27 17:37:48

这是非常有趣的解决方案，谢谢你，除非我说我的小部件嵌入在第三方页面，我没有影响，我不能要求他们添加脚本。我将探索一下带有两个嵌套iframe的解决方案是否可以解决问题。 –

如果iframe没有任何滚动，那么高度和宽度会被设置为页面的一部分？ –

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

回答

相关问题