当鼠标在Firefox中嵌入iframe时阻止父页面滚动 [英] Prevent parent page from scrolling when mouse is over embedded iframe in Firefox

问题描述

...不限制iframe中的滚动条或需要专门为所有可滚动元素命名/标记。

想象一下Google地图嵌入在父页面中的小部件。当你放大小部件，你不希望父页滚动显然。

我想我的解决了这个问题：
$ b $ b

在iframe内滚动时，body不知道
在那里发生了什么。但是，当iframe滚动到达底部或
顶部时，它将滚动到body。

取消从iframe传播的事件。 b $ b

但是该解决方案在Firefox中不起作用，因为Firefox不会 - by design - 将iframe捕获的事件传播到父页面，但奇怪的是它会滚动父页面。请参阅 jsfiddle here 。
$ b

  $（'body'）。bind（'mousewheel DOMMouseScroll'，onWheel）; 
 
函数onWheel（e）{
 if（e.target === iframe）
 e.preventDefault（）; 
 console.log（e）; 
 
 
 
 
 
 $ b 
那么，当用户放大嵌入式iframe中的内容时，如何防止页面滚动，在Firefox？
解决方案
由于这是Firefox中的一个错误，解决方法是直接使用 scroll 事件，而不是 mousewheel  /  DOMMouseScroll  ones。
 
 
 
我这样做的方式：当用户在 iframe 上输入鼠标时，我将一个标志设置为 true ，当他离开鼠标时，我将它设置回 false 。
 
 
 
然后，当用户尝试滚动，但鼠标箭头是在iframe中，我阻止父窗口滚动。但是，不幸的是，你不能用通常的 e.preventDefault（）方法来阻止窗口滚动，所以我们仍然需要另一个解决方法，迫使窗口滚动到X和Y的位置已经在之前。
 
 
 
完整的代码： 
 
 
 <$ c （函数（w）{
 var s = {insideIframe：false} 
 $ b $（iframe）.mouseenter（function（）{
 s.insideIframe = true; 
 s.scrollX = w.scrollX; 
 s.scrollY = w.scrollY; 
}）。mouseleave（function（）{
 s.insideIframe = false; 
）b 
 $ b $（document）.scroll（function（）{
 if（s.insideIframe）
 w.scrollTo（s.scrollX，s.scrollY）; 
}）; 
}）（window）; 
  
我创建了一个立即执行的函数来防止定义 s 变量在全球范围内。
 
 
 
小提琴工作： http://jsfiddle.net/qznujqjs/16/  
 
 
 
 
 
 
编辑
 
 
 
由于你的问题没有使用jQuery标记（虽然在里面，你已经使用库展示了一个代码），但是使用vanilla JS的解决方案和上面一样简单： p> 
 
 
 （函数（w）{
 var s = {insideIframe：false} 
 
 iframe。 addEventListener（'mouseenter'，function（）{
 s.insideIframe = true; 
 s.scrollX = w.scrollX; 
 s.scrollY = w.scrollY; 
}） ; 
 
 iframe.addEventListener（'mouseleave'，function（）{
 s.insideIframe = false; 
}）; 
 
 document.addEventListener 'scroll'，function（）{
 if（s.inside iframe）
 w.scrollTo（s.scrollX，s.scrollY）; 
}）; 
}）（window）; 
  
 
...without limiting the scroll inside the iframe or the need to specifically name/tag all scrollable elements.

Imagine google maps widget embedded in parent page. When you zoom in the widget you don't want the parent page to scroll, obviously.

I thought an answer to my previous question solved the problem:

  
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.
  
  
Cancel the event that propagates from the iframe.
But the solution does not work in Firefox because Firefox will not - by design - propagate events captured by iframe to the parent page, yet strangely it will scroll the parent page. See jsfiddle here. 
$('body').bind('mousewheel DOMMouseScroll', onWheel);

function onWheel (e){
    if (e.target === iframe)
        e.preventDefault();
    console.log(e);
}
So, how do I prevent page from scrolling when user zooms content in embedded iframe, in Firefox?
解决方案
Since it is a bug in Firefox, the workaround is to work directly with the scroll event, instead of the mousewheel / DOMMouseScroll ones.

The way I did: When user enters the mouse over the iframe, I set a flag to true, and when he leaves the mouse out there, I set it back to false.

Then, when user tries to scroll, but the mouse arrow is inside the iframe, I prevent the parent window scrolling. But, unfortunately, you can't prevent the window scrolling with the usual e.preventDefault() method, so we still need another workaround here, forcing the window to scroll exactly to the X and Y positions it was already before.

The full code:
(function(w) {
    var s = { insideIframe: false } 

    $(iframe).mouseenter(function() {
        s.insideIframe = true;
        s.scrollX = w.scrollX;
        s.scrollY = w.scrollY;
    }).mouseleave(function() {
        s.insideIframe = false;
    });

    $(document).scroll(function() {
        if (s.insideIframe)
            w.scrollTo(s.scrollX, s.scrollY);
    });
})(window);
I've created an immediately executed function to prevent defining the s variable in the global scope.

Fiddle working: http://jsfiddle.net/qznujqjs/16/



Edit

Since your question was not tagged with jQuery (although inside it, you've showed a code using the library), the solution with vanilla JS is as simple as the above one:
(function(w) {
    var s = { insideIframe: false } 

    iframe.addEventListener('mouseenter', function() {
        s.insideIframe = true;
        s.scrollX = w.scrollX;
        s.scrollY = w.scrollY;
    });

    iframe.addEventListener('mouseleave', function() {
        s.insideIframe = false;
    });

    document.addEventListener('scroll', function() {
        if (s.insideIframe)
            w.scrollTo(s.scrollX, s.scrollY);
    });
})(window);


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