Positionierung Popup-iframe nach scrollTop des oberen Fensters

Question

Ich entwickle Plugin, das einige Pop-up hat. Plugin ist auf einer Seite wie iframe aber mit anderer Domain enthalten. Es ist nicht erlaubt, andere Änderungen auf dieser Seite vorzunehmen, außer diesen iframe hinzuzufügen.

<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

Darauf achten, dass scrolling = "no" und Höhe viel größer dann heigh der Seite. Pop-up sollte vertikal auf der Seite zentriert sein, wenn es angezeigt wird, egal wie viel Benutzer die Seite nach unten scrollte. Siehe das Bild

Ich versuchte $ (top.window) .scrollTop(), aber es ist domänenübergreifende Problem.

Gibt es einen CSS-Trick, um dies zu tun?

Vielen Dank im Voraus.

Answer 1

Sie können mit transform: translate() Funktion CSS versuchen

iframe { 
 
    top: 50%; 
 
    position: absolute; 
 
    transform: translateY(-50%); 
 
    }

<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>