Tengo un iframe que llama a someElement.focus . Cuando esto sucede, el padre se desplaza para mostrar el iframe. ¿Cómo puedo evitar que el padre se desplace? Efectivamente, quiero que el propio iframe se desplace de modo que, dentro del iframe, el elemento correcto se desplace al espacio del propio iframe, pero la página principal no debería verse afectada.
const lines = new Array(100).fill(0).map((e,i) => i).join('\n') const script = 'script'; const frameContent = ` <style> pre { font-size: 60pt; } </style> <body> <pre>${lines}</pre> <input type="text" id="target"> </body> <${script}> document.querySelector('#target').focus(); </${script}> `; document.querySelector('pre').textContent = lines; const iframe = document.querySelector('iframe'); iframe.src = URL.createObjectURL(new Blob([frameContent], {type: 'text/html'})); <style> pre { font-size: 60pt; } } </style> <div>you should see this element</div> <pre></pre> <iframe></iframe> <div>you should NOT be scrolled to see this element</div>Para mí, tiene sentido que llamar al foco mueva el área de entrada a la pantalla, pero al mismo tiempo, no tiene sentido para mí que cualquier iframe aleatorio pueda hacer que la página principal salte a él a pedido llamando al foco.
¿Es posible evitar que el iframe afecte al padre?
Puede intentar pasar opciones al establecer el enfoque:
document.querySelector('#target').focus({preventScroll: true}); La opción preventScroll se describe en los documentos de MDN en HTMLElement.focus() .
Tenga en cuenta que es probable que esto solo funcione para iframes del mismo origen.
Los navegadores aplican restricciones que pueden impedir que se respete la opción preventScroll dentro de iframes de origen cruzado/de terceros.