CODEWITHSUNDEEP
javascripthtmliframe
Digital Farmer
Digital Farmer

Reputation: 2107

How to equalize the starting position of iframes to scroll to the bottom of the page?

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:

enter image description here

Current Result:

enter image description here

Upvotes: 1

Views: 603

Answers (3)

Александр Маренец
Александр Маренец

Reputation: 1

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>

https://games.app.goo.gl/xBJcfuDt4gSMEDe96

Upvotes: 0

Александр Маренец
Александр Маренец

Reputation: 1

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>

Upvotes: 0

Spectric
Spectric

Reputation: 31992

You need to set the height of the iframe to the height of the content.

Currently, you are setting the height of each iframe to 200px. However, the height of the content varies for each individual source. If the height of the source of the iframe is less than 200px, you will "overscroll". In this case, you can to apply a specific height to each 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>

Note that you can get the height of the content of the iframe by going to the source of it and getting the body's offsetHeight (e.g, document.body.offsetHeight).

Upvotes: 1

Related Questions