Firefox中Iframe自动滚动至底部且提前加载问题求助

问题根源 #

1. 你的iframe初始就设置了src属性，不管滚动逻辑如何，页面加载时浏览器就会自动加载这个URL，这是核心问题。
2. Firefox的自动滚动问题，是因为未加载内容的iframe有固定高度（1500px），浏览器布局时会提前预留空间，导致页面自动滚动到这个大元素的位置。

修正步骤与代码 #

1. 调整iframe初始属性

把真实的URL放到data-src里，src设为about:blank，同时初始高度设为0（加载后再恢复），避免提前占空间：

<iframe id="ifr" width="100%" height="0" scrolling="no" frameborder="0" data-src="...url" src="about:blank"></iframe>

2. 改用原生JS实现滚动触发逻辑

原代码用了jQuery方法，若未引入jQuery会失效，且Firefox对其滚动事件处理存在差异，原生JS更稳定：

let loaded = false;
const iframe = document.getElementById('ifr');

// 页面加载完成后绑定事件，确保能找到iframe元素
window.addEventListener('load', function() {
    // 绑定滚动监听
    window.addEventListener('scroll', function scrollHandler() {
        // 计算当前滚动的垂直距离（兼容各浏览器的原生写法）
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop > 500 && !loaded) {
            // 加载真实URL
            iframe.src = iframe.dataset.src;
            // 恢复iframe的预设高度
            iframe.style.height = '1500px';
            loaded = true;
            // 加载完成后移除滚动监听，减少性能消耗
            window.removeEventListener('scroll', scrollHandler);
        }
    });
});

额外说明 #

• 用about:blank作为初始src，能避免浏览器加载不必要的内容，同时符合浏览器安全规范。
• 加载完成后移除滚动监听，避免后续滚动时重复触发无效逻辑。
• 初始设高度为0，彻底解决Firefox因大高度占位元素导致的自动滚动问题。

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