javascript - iFrame inside draggable / scrollable area -

i'm stuck @ finding solution problem.

let's assume have fixed-sized area scrollbars. need place iframe inside can preview either using scrollbars or dragging it. prevent iframe capturing mouse events, i've put absolute positioned transparent div above it.

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

then used code transforms mouse dragging div scrolling.

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

please take @ demo: jsfiddle

the problem is, overlay div not stretched across whole iframe, it's spread visible div area: screenshot

it works fine though if delete this

#scrolling_container {     position: relative; } 

but need because otherwise overlay div overlaps scrollbars , can no longer use them.

is there cross-browser solution prevents iframe capturing mouse events rid of overlay div?

you can disable mouse interaction iframe if give pointer-events:none; property in css.