可拖动/可滚动区域内的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

的问题是，覆盖DIV不是在整个IFRAME拉伸，它只是传播到可见的div区域： Screenshot

它的工作原理细但如果我删除此

#scrolling_container { 
    position: relative; 
} 

但我需要它是这样的，否则覆盖d iv重叠滚动条，我不能再使用它们。

是否有任何跨浏览器的解决方案，防止iframe捕获鼠标事件，所以我可以摆脱覆盖div？

Answer 1

如果您在CSS中为其提供pointer-events:none;属性，则可以禁用与iframe的任何鼠标交互。

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 */ 
} 

可能检查此链接

Disable mouse scroll wheel zoom on embedded Google Maps