當鼠標懸停在 Firefox 中嵌入的 iframe 上時，防止父頁面滾動

Question

...不限制 iframe 內的滾動或需要專門命名/標記所有可滾動元素。

想象一下嵌入在父頁面中的谷歌地圖小部件。 當您放大小部件時，您顯然不希望父頁面滾動。

我認為我上一個問題的答案解決了這個問題：

在 iframe 內滾動時，主體對那里發生的事情一無所知。 但是當 iframe 滾動條到達底部或頂部時，它會將滾動傳遞給正文。

取消從 iframe 傳播的事件。

但是該解決方案在 Firefox 中不起作用，因為 Firefox 不會 - 按照設計- 將 iframe 捕獲的事件傳播到父頁面，但奇怪的是它會滾動父頁面。 請參閱此處的 jsfiddle 。

$('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上的可見垂直滾動條。 有幾種方法可以解決它，例如 - 隱藏滾動條，但仍然能夠滾動

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