0
260
Views¿Cómo igualar la posición inicial de iframes para desplazarse hasta la parte inferior de la página?
La idea es que todos los iframes muestren el final de la página, donde está el mapa de presión. Pero cuando se crean, los iframes no aparecen en la misma posición inicial, por lo que cuando trato de desplazarlos hacia abajo, ¡algunos cruzan el umbral!
<html> <head> <style> iframe { height: 200px; width: 100%; border: none; } .iframe-container { height: 120px; width: 700px; overflow: auto; overflow: hidden; float: left; } </style> </head> <body style="background-color:black;"> <div class="grid games" id="jogos-sofascore"> <div id="select-box-5" style="width: 100%;"> <div class="iframe-container" > <iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed"></iframe> </div> <div class="iframe-container"> <iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed"></iframe> </div> <div class="iframe-container"> <iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed"></iframe> </div> </div> </div> <script> function atualizar() { document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight) } setInterval(atualizar,5000); </script> </body> </html>Intenté usar una forma de desplazarme hasta la parte superior y luego hasta el final:
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = 0) document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)Pero no funcionó, los iframes no se desplazaron al principio como deberían.
¿Cómo podría resolver este problema haciendo que el evento de desplazamiento al final de la página sea maleable independientemente de la posición de inicio de los iframes?
Resultado Esperado:
Resultado actual:
2 answers
Answer question0
Debe establecer la altura del iframe a la altura del contenido.
Actualmente, está configurando la altura de cada iframe en 200px . Sin embargo, la altura del contenido varía para cada fuente individual. Si la altura de la fuente del iframe es inferior a 200px , se "desplazará en exceso". En este caso, puede aplicar una height específica a cada iframe .
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight) <html> <head> <style> iframe { width: 100%; border: none; } .iframe-container { height: 120px; width: 700px; overflow: auto; overflow: hidden; float: left; } </style> </head> <body style="background-color:black;"> <div class="grid games" id="jogos-sofascore"> <div id="select-box-5" style="width: 100%;"> <div class="iframe-container" > <iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe> </div> <div class="iframe-container"> <iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe> </div> <div class="iframe-container"> <iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe> </div> </div> </div> </body> </html> Tenga en cuenta que puede obtener la altura del contenido del iframe yendo a la fuente del mismo y obteniendo la altura de offsetHeight del cuerpo (por ejemplo, document.body.offsetHeight ).
0
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight) <html> <head> <style> iframe { width: 100%; border: none; } .iframe-container { height: 120px; width: 700px; overflow: auto; overflow: hidden; float: left; } </style> </head> <body style="background-color:black;"> <div class="grid games" id="jogos-sofascore"> <div id="select-box-5" style="width: 100%;"> <div class="iframe-container" > <iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe> </div> <div class="iframe-container"> <iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe> </div> <div class="iframe-container"> <iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe> </div> </div> </div> </body> </html>