The idea is that all iframes show the end of the page, where the pressure map is. But when they are created, iframes don't appear in the same starting position, so when I try to scroll them all down, some cross the threshold!
<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>
I tried using a way to scroll to the top and then to the end:
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = 0)
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
But it didn't work, the iframes weren't scrolled to the beginning as they should.
How could I solve this problem making the scroll-to-end-of-page event malleable regardless of the start position of iframes?
Expected Result:
Current Result:
