如何对齐iframe初始位置 实现所有iframe均稳定滚动到页面底部

问题根因 #

1. 滚动位置计算错误：容器scrollTop的最大有效值为scrollHeight - clientHeight（内容总高度减去容器可视高度），直接赋值为scrollHeight会导致滚动超出有效范围，出现内容截断
2. 连续滚动操作被合并：浏览器会将同一渲染周期内的多次DOM属性修改合并执行，连续两次修改scrollTop只会生效最后一次，滚动到顶部的操作会被忽略
3. 未考虑iframe加载时序：iframe内容未完全加载时，scrollHeight数值不准确，也会导致滚动位置异常

修正后完整代码 #

<html>
    <head>
        <style>
            iframe {
                height: 200px;
                width: 100%;
                border: none;
            }
            .iframe-container {
                height: 120px;
                width: 700px;
                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 src="https://www.sofascore.com/event/9985319/attack-momentum/embed"></iframe>
                </div>
                <div class="iframe-container">
                    <iframe src="https://www.sofascore.com/event/9985309/attack-momentum/embed"></iframe>
                </div>
                <div class="iframe-container">
                    <iframe src="https://www.sofascore.com/event/9992075/attack-momentum/embed"></iframe>
                </div>
            </div>
        </div>
        <script>
            function atualizar() {
                document.querySelectorAll('.iframe-container').forEach(e => {
                    // 计算准确的底部滚动位置
                    const targetScroll = e.scrollHeight - e.clientHeight;
                    // 先滚动到顶部
                    e.scrollTop = 0;
                    // 等待下一渲染帧再执行滚动到底部，避免操作被合并
                    requestAnimationFrame(() => {
                        e.scrollTop = targetScroll;
                    });
                });
            }
            // 监听iframe加载完成，首次加载后立即执行滚动
            document.querySelectorAll('iframe').forEach(iframe => {
                iframe.addEventListener('load', atualizar);
            });
            // 每5秒更新一次滚动位置
            setInterval(atualizar, 5000);
        </script>
    </body>
</html>

核心修改点 #

• 修正了滚动位置计算公式，不会出现滚动超出阈值的问题
• 用requestAnimationFrame分隔两次滚动操作，保证先回顶部再滚到底的逻辑正常生效
• 新增iframe加载监听，保证首次滚动时内容高度计算准确
• 移除了重复的id="iframe"属性（id不允许重复，不影响功能但不符合规范）
• 清理了重复的overflow属性声明

内容的提问来源于stack exchange，提问作者Digital Farmer