How to prevent iFrame actions from causing outer page to scroll to it

Question

First, I know there are many questions about this phenomenon but none of the workarounds given so far would help in the situation I have here.

Environment: My code is in the Outer iFrame inside a page I don't control. It's sized to fit all my content so no scrolling happens inside my iFrame. Rather, the outer page can scroll it up and down to view its content.

Problem: I have an inner iFrame holding third party ads which I can't control. If the inner iFrame runs any of the following Javascript commands, the outer page scrolls everything down to bring the inner iFrame into view:

1. blur and focus on an element inside it

2. window.location.href or document.location.hash to an anchor inside it.

3. scrollIntoView on an element inside it

Here is a demo a colleague put together (wait 5 seconds for it to start)

Solutions that don't work:

1. If I controlled the outer page, I could listen to the onScroll event and prevent the page from scrolling if it wasn't from a mousewheel or key up/down event. However, due to security reasons, my outer iFrame can't access the main page or prevent the main page from scrolling it up or down.
2. I could overwrite all those Javascript methods mentioned above so they didn't work - however, the ads in my inner iFrame actually create their own internal iFrames which have that functionality and causes the same issue.
3. There are no events being propagated up that I can see which my iFrame could stop from reaching the main page. The browser appears to listen directly to the innermost iFrame.

Answer 1

Maybe there are some other ways to solve this issue, but one pretty straightforward solution is to take troublesome iframes out of the natural layout of the site by positioning them as fixed.

Then the only remaining challenge may be to force them to behave as if they were part of the natural layout. But this tasks seems to be of mediocre complexity in comparison to the original problem.

Moreover, in your particular case, the above approach works pretty out of the box. Since the outer iframe is not scrollable and its height matches its content height: you just need to insert -- for each iframe -- a placeholder that matches its counterpart size...