Tengo un iframe en una página web:

 <iframe id="wordBookiFrame" src="/wordBook" style="position:absolute; width:100%; height:100%;"></iframe>

Al ver la página web en una pantalla pequeña (es decir, un teléfono inteligente), tanto el iframe como la página principal se pueden desplazar, lo cual es de esperar, como se ve aquí.

Sin embargo, al desplazarse hasta el final del iframe, si continúa desplazándose, el desplazamiento de la página principal (el 'cuerpo') toma el control y el usuario también se desplazará hasta la parte inferior del cuerpo. Supongo que este es el comportamiento estándar del navegador.

Sin embargo, la consecuencia de este comportamiento es que cuando un usuario intenta desplazarse hacia arriba en el iframe, se atasca, ya que el desplazamiento del cuerpo tiene prioridad sobre el iframe. En pocas palabras, el cuerpo parece "tomar el control" y tener prioridad sobre el propio iFrame y da como resultado un comportamiento de desplazamiento fijo del iFrame. Por lo tanto, necesito deshabilitar de alguna manera el desplazamiento del cuerpo en Svelte cuando el iframe está visible. Sin embargo, no hay una manera fácil de hacer esto en Svelte, ya que la etiqueta BODY se encuentra en un archivo separado.

La solución que he intentado es la siguiente (colocada dentro de una función settimeout):

 if(document.getElementById("wordBookiFrame").style.display == "block") //as the iframe only displays in certain circumstances { window.addEventListener('scroll',(event) => { window.scrollTo(0,0) return; }); }

El pensamiento detrás de este código es que al obligar a la página principal a desplazarse en la posición 0,0, puede evitar este problema. Desafortunadamente, el código es temperamental.

¡Espero encontrar algunas soluciones fáciles a este molesto problema!