0

How can I prevent scrolling in an iframe while the user has their mouse over the iframe?

This is the code I'm using:

JavaScript

function preventDefault(e){
    e = e || window.event;
    if( e.preventDefault )
        e.preventDefault();
    e.returnValue = false;  
}

document.getElementById('a').onmousewheel = function(e){
    console.log(this);
    document.getElementById('a').scrollTop -= e. wheelDeltaY;
    preventDefault(e);
}

HTML

<div>
    <iframe id='a' src='http://www.google.com/intl/en/about/index.html'></iframe>
</div>

CSS

div{ height:1000px }
iframe{ margin:200px; }

Here is an example JS Fiddle. It works fine in Chrome but not in FF. Desirable behavior should be the following: whole page (body) should not scroll while mouseover event on iframe occurs: no matter how much text inside iframe (with scrollbar http://jsfiddle.net/2QcVJ/23/ or without http://jsfiddle.net/2QcVJ/25/);

Any thoughts how to do that? Thanks in advance

stryker
  • 149
  • 1
  • 16
  • All events are passed to the iframe when the mouse hovers over it, so unless you have control over the iframe's code, you cannot do this unless you add `pointer-events: none;` to its css, which means it wont take clicks, scrolls, etc... It essentially hides it from pointer events. – somethinghere Mar 29 '16 at 16:22
  • 1
    @Matthijs it won't work unless you are able to do this _inside_ the iframe, as all events are passed to the iframe when your cursor is on it, your page receives no events as far as I know. – somethinghere Mar 29 '16 at 16:24
  • set pointer-events: none on the iframe perhaps? – Robert Longson Mar 29 '16 at 16:25
  • @somethinghere - can you please provide working jsFiddle example with pointer-events? Thanks – stryker Mar 29 '16 at 16:26
  • Have a look at the docs here: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events - I am not certain this solves your problem as it will also _not_ detect your mouse hovering over the element anyhow, so you can't reactivate your iframe easily with events. – somethinghere Mar 29 '16 at 16:33
  • @somethinghere Not sure it will help me cause I need to have an ability to sroll content inside iframe. Using pointer-events there is no iteraction with iframe's content – stryker Mar 29 '16 at 17:24
  • To be honest, this seemslike a FF specific issue or even a bug, as I noticed the scroll on the parent page only occurs when you move your cursor outside the iframe after scrolling,which is not really standard behaviour or practise... – somethinghere Mar 29 '16 at 17:28
  • @somethinghere Apparently here is the same issue: http://stackoverflow.com/questions/32165246/prevent-parent-page-from-scrolling-when-mouse-is-over-embedded-iframe-in-firefox and here is the open bug issue https://bugzilla.mozilla.org/show_bug.cgi?id=1084121 – stryker Mar 31 '16 at 16:25

0 Answers0