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

Question

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

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

我认为我的previous question 的答案解决了这个问题：

在 iframe 内滚动时，body 不知道任何关于 那里发生了什么。但是当 iframe 滚动条到达底部或 顶部，它将滚动传递给正文。

取消从 iframe 传播的事件。

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

$('body').bind('mousewheel DOMMouseScroll', onWheel);

function onWheel (e){
    if (e.target === iframe)
        e.preventDefault();
    console.log(e);
}

那么，当用户在 Firefox 中放大嵌入式 iframe 中的内容时，如何防止页面滚动？

Answer 1

由于它是 Firefox 中的一个错误，解决方法是直接使用 scroll 事件，而不是 mousewheel / DOMMouseScroll 事件。

我的做法：当用户在iframe 上输入鼠标时，我将标志设置为true，当他将鼠标离开时，我将其设置回false。

然后，当用户尝试滚动，但鼠标箭头在 iframe 内时，我会阻止父窗口滚动。但是，不幸的是，您无法使用通常的 e.preventDefault() 方法阻止窗口滚动，因此我们在这里仍然需要另一种解决方法，强制窗口精确滚动到之前的 X 和 Y 位置。

完整代码：

(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);

我创建了一个立即执行的函数来防止在全局范围内定义 s 变量。

小提琴工作：http://jsfiddle.net/qznujqjs/16/

---

编辑

由于您的问题没有用 jQuery 标记（尽管在其中，您已经展示了使用该库的代码），因此使用 vanilla JS 的解决方案与上述解决方案一样简单：

(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);

Answer 2

鉴于所有先决条件，我认为以下是在 Firefox 中实现此功能的最明智的方法。

用div 包裹你的iframe，它稍微短一点，以便在其中启用垂直滚动：

<div id="wrapper" style="height:190px; width:200px; overflow-y: auto; overflow-x: hidden;">
  <iframe id="iframeid" height="200px" width="200px" src="about:blank">
  </iframe>
</div>

现在您可以将iframe 垂直居中并每次重新定位它 包装器接收到scroll 事件（当用户试图在框架边缘滚动时会发生）：

var topOffset = 3;

wrapper.scrollTop(topOffset);

wrapper.on("scroll", function(e) {
    wrapper.scrollTop(topOffset);
});

将此与您之前对 Chrome 的修复相结合，它应该涵盖所有主要浏览器。这是一个工作示例 - http://jsfiddle.net/o2tk05ab/5/

唯一突出的问题是包装器div 上的可见垂直滚动条。有几种方法可以解决它，例如 - Hide scroll bar, but still being able to scroll

Answer 3

我认为这将解决您的问题 它解决了我的问题

    var myElem=function(event){
  return $(event.toElement).closest('.slimScrollDiv')
}

$(document).mouseover(function(e){
     window.isOnSub=myElem(e).length>0



})

$(document).on('mousewheel',function(e){
  if(window.isOnSub){  
console.log(e.originalEvent.wheelDelta);      
    if( myElem(e).prop('scrollHeight')-myElem(e).scrollTop()<=myElem(e).height()&&(e.originalEvent.wheelDelta<0)){

      e.preventDefault()
    } 


}

})

用你想要的元素选择器替换“.slimScrollDiv”
防止鼠标在其上时父滚动

http://jsbin.com/cutube/1/edit?html,js,output