Prevent iframe from scrolling parent container

[ms609]

An iframe can cause its parent window to scroll to another position, for example using document.body.scrollIntoView();

There seems to be no way to override (prohibit) this behaviour under the present w3c specification. StackOverflow user Kaiido has suggested a solution that exploits a bug in Chrome, which raises the question as to whether a CSS solution to prevent cross-source scrolling would be possible.

Further details at the StackOverflow answer.

[Malvoz]

See related: w3c/webappsec-permissions-policy#171 / the vertical-scroll document policy feature.

[e-oz]

Workaround for cases where you know when iframe will try to scroll parent:

1. Right before this event:

this.preScrollTop = window.scrollY;
const doc = window.document.documentElement;
this.prevPositionStyle = doc.style.position ?? undefined;
doc.style.position = 'fixed';
doc.style.top = (this.preScrollTop * -1) + 'px';

2. After the event:

window.document.body.style.position = this.prevPositionStyle ?? 'static';
window.scroll({ top: this.preScrollTop });