當鼠標懸停在嵌入式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上時，防止父頁面滾動

回答

相關問題