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

时间:2015-05-27 15:26:19

标签: css html5 iframe scroll mousewheel

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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