Parece que Chrome y Firefox tienen dos interpretaciones diferentes de scrollIntoView() cuando se trata de iframes. En Chrome, el desplazamiento solo se aplica a los elementos hasta que se encuentra una position:fixed , ya sea en el iframe o en el marco principal. Pero en Firefox, no es cualquier ancestro el que tiene position:fixed ; parece que también es necesario que haya un elemento antepasado no desplazable en el marco principal; de lo contrario, el marco principal seguirá desplazándose.
Quiero evitar que Firefox se desplace por el marco principal en este caso. Hasta ahora, la única solución que he encontrado es hacer que un elemento en el marco principal sea position:fixed , pero como puede imaginar, eso arruinará el diseño del marco principal si no desea un elemento fijo y desea que la página fluya (p. ej. , si el iframe está incrustado en una publicación de blog larga).
Tenga en cuenta que NO tengo control sobre el iframe (también es un dominio cruzado), de lo contrario, podría simplemente cambiar scrollIntoView() con scrollTo() .
Aquí hay un ejemplo concreto que puede probar:
<html> <head> <title>Parent frame</title> <style> html { scroll-behavior:smooth; } </style> </head> <body> <iframe src="iframe.html" style="height:200px;"></iframe> <div style="height:10000px;">parent</div> </body> </html> <html> <head> <title>Child frame</title> <style> </style> <script> setTimeout(function() { var bottom = document.getElementById("bottom"); bottom.scrollIntoView(); }, 2000); </script> </head> <body> <div id="someParent" style="height:200px;position:fixed;overflow:scroll;"> <div style="height:5000px;">iframe</div> <div id="bottom" style="background-color:red;">bottom</div> </div> </body> </html>