如何均衡 iframe 的起始位置以滚动到页面底部？答案

【问题标题】：How to equalize the starting position of iframes to scroll to the bottom of the page?如何均衡 iframe 的起始位置以滚动到页面底部？
【发布时间】：2022-01-11 19:01:48
【问题描述】：

这个想法是所有 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 没有按预期滚动到开头。

无论 iframe 的起始位置如何，如何使滚动到页尾事件具有延展性，我该如何解决这个问题？

预期结果：

当前结果：

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

您需要将iframe的高度设置为内容的高度。

目前，您将每个 iframe 的高度设置为 200px。但是，内容的高度因每个单独的来源而异。如果iframe 的源高度小于200px，您将“过度滚动”。在这种情况下，您可以将特定的height 应用到每个iframe。

document.querySelectorAll('.iframe-container').forEach(e =&gt; 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 内容的高度。

【讨论】：

朋友您好，感谢您的支持。问题是，如果我更改其他游戏的链接，由于 iframe 有其他高度的机会，错误会再次发生，对吗？有没有一种可延展的方式，无论大小如何，它都可以滚动每个人的完美数量，而无需我创建指定其大小的 iframe？
如果可能的话，如果你能帮助我，我会尽量给你一些我能给予的赏金
@BrondbyIF 至少似乎没有一种方法可以纯粹地在前端进行。如果您有一个可以向该站点发送请求的服务器，那么它是可能的。
嗨，@Spectric，我可以访问图表数据 api，我想我必须创建自己的图表！
@BrondbyIF OK :)。抱歉，我没能提供帮助。