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;
}

但是我需要它，因为否则叠加div会重叠滚动条，我再也无法使用它们了。

是否有任何跨浏览器解决方案可以阻止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

可拖动/可滚动区域内的iFrame

2 个答案: