Prevent scroll on parent page when mouse is over an IFRAME

Question

I have an IFRAME which will be inserted in a 3rd party site (which I do not have access to).

Is there a way to prevent scrolling on the parent page when the mouse cursor is over an IFRAME?

Answer 1

You would have to run a script that modifies the parent elements CSS. This is typically only allowed on iframes that are being hosted on the same domain. If you want to try to do it across domains see the answers below:

Ways to circumvent the same-origin policy

The questioned was also answered thoroughly here. Access parent window from iframe (cross-domain)

If you are on the same domain you can try the following:

// Mouseover event to remove scrolling from parent window's document.
document.body.addEventListener('mouseover', function() {
  parent.window.document.body.style.overflow = 'hidden';
});
// Mouseover event to restore scrolling on parent window's document.
document.body.addEventListener('mouseleave', function() {
  parent.window.document.body.style.overflow = '';
});