可拖動/可滾動區域內的iFrame

Question

我一直在尋找解決問題的方法。

假設我們有固定大小的區域，帶有滾動條。 我們需要在其中放置一個iframe，以便我們可以使用滾動條或拖動它來預覽它。 為了防止iframe捕獲鼠標事件，我在其上方放置了絕對定位的透明div。

<div style="" id="scrolling_container">
 <div id="drag_div"></div>
 <div id="frame_div">
     <iframe id="page_iframe" src="http://www.bbc.com/" scrolling="auto" frameborder="0"></iframe>
 </div>
</div>

然后，我使用了一些將鼠標拖動轉換為div滾動的代碼。

    var draggableContainer = document.getElementById("drag_div");
    var scrollingContainer = document.getElementById("scrolling_container");
    draggableContainer.removeEventListener('mousedown', draggableContainer.md, 0);
    window.removeEventListener('mouseup', draggableContainer.mu, 0);
    window.removeEventListener('mousemove', draggableContainer.mm, 0);
    var pushed = 0;

    draggableContainer.addEventListener('mousedown',
            draggableContainer.md = function(e) {
                pushed = 1;
                lastClientX = e.clientX;
                lastClientY = e.clientY;

                e.preventDefault();
                e.stopPropagation();
                draggableContainer.style.cursor = "move";
            }, 0
    );

    window.addEventListener('mouseup', 
            draggableContainer.mu = function() {
                pushed = 0;
                draggableContainer.style.cursor = "pointer";
            }, 0
    );

    window.addEventListener('mousemove',
            draggableContainer.mm = function(e) {
                if (pushed) {
                    var offsetLeft = - lastClientX + (lastClientX=e.clientX),
                            offsetTop = - lastClientY + (lastClientY=e.clientY);                         
                        scrollingContainer.scrollLeft -= offsetLeft;
                        scrollingContainer.scrollTop -= offsetTop;
                }
            }, 0
    );

請看一下演示： jsFiddle

問題是，overlay div不會在整個iframe上延伸，而只會擴展到可見的div區域： 屏幕截圖

如果我刪除它，它工作正常

#scrolling_container {
    position: relative;
}

但是我需要這樣，因為否則，overlay div會覆蓋滾動條，並且我將無法再使用它們。

是否有任何跨瀏覽器解決方案可阻止iframe捕獲鼠標事件，以便擺脫重疊div？

Answer 1

如果您給它pointer-events:none;您可以禁用與iframe的任何鼠標交互pointer-events:none; CSS中的屬性。

Answer 2

#drag_div {
   background:transparent; 
   position:relative; 
   width:100%;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

可能檢查此鏈接

在嵌入式Google地圖上禁用鼠標滾輪縮放