javascript 如何均衡iframes的起始位置以滚动到页面底部？

0ejtzxu1 于 2022-12-28 发布在 Java

关注(0)|答案(3)|浏览(273)

这个想法是所有的iframe显示页面的结尾，也就是压力图所在的位置，但是当它们被创建时，iframe并不出现在相同的起始位置，所以当我试图向下滚动它们时，一些iframe越过了阈值!

<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>

我试着用一种方法滚动到顶部，然后到最后：

document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = 0)
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)

但它没有工作，iframe没有滚动到开头，因为他们应该。
如何解决这个问题，使scroll-to-end-of-page事件具有延展性，而不管iframe的起始位置如何？
预期结果：

当前结果：

JavaScript

来源：https://stackoverflow.com/questions/70247706/how-to-equalize-the-starting-position-of-iframes-to-scroll-to-the-bottom-of-the

3条答案

按热度按时间

9njqaruj1#

您需要将iframe的高度设置为内容的高度。
当前，您将每个iframe的高度设置为200px。但是，每个源的内容高度不同。如果iframe的源高度小于200px，您将"过卷"。在这种情况下，您可以对每个iframe应用特定的height。

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>

请注意，您可以通过转到iframe的源代码并获取主体的offsetHeight（例如document.body.offsetHeight）来获得iframe内容的高度。

赞(0）回复(0）举报 2022-12-28

kadbb4592#

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>

赞(0）回复(0）举报 2022-12-28

wnavrhmk3#

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

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 如何均衡iframes的起始位置以滚动到页面底部？

3条答案

相关问题

热门标签

最新问答