Chrome中iframe设display:none后滚动位置重置问题及解决方法咨询

问题复现代码 #

$(document).click(function(){
    $('div').toggle(); // div的滚动位置会被保留
    $('#FileFrame').toggle(); // iframe的滚动位置不会被保留
});

现象描述 #

当通过display: none隐藏iframe后再次显示时，Windows 11系统下的Chrome（115.0.5790.110）和Edge（115.0.1901.188）中，iframe的滚动位置会回到顶部；但Firefox（116.0）中iframe的滚动位置能正常保留。

是否属于标准行为？ #

HTML标准并未明确规定display: none元素的滚动位置必须保留，这属于不同浏览器引擎的实现差异：

• Chrome和Edge基于Blink引擎，会在元素设为display: none时重置其滚动上下文，导致滚动位置丢失；
• Firefox的Gecko引擎则会保留滚动位置状态，即使元素被隐藏。

这种跨浏览器差异不属于违反标准，而是厂商对标准未明确部分的不同实现。

保留iframe滚动位置的方法 #

可以通过手动记录+恢复滚动位置的方式解决，具体步骤如下：

1. 在隐藏iframe前，记录其内部文档的滚动位置；
2. 重新显示iframe后，将滚动位置恢复到记录的值。

示例代码：

// 存储滚动位置的变量
let iframeScrollTop = 0;

$(document).click(function(){
    const $iframe = $('#FileFrame');
    const $div = $('div');

    if ($iframe.is(':visible')) {
        // 隐藏前记录滚动位置
        const iframeDoc = $iframe[0].contentWindow.document;
        iframeScrollTop = iframeDoc.documentElement.scrollTop || iframeDoc.body.scrollTop;
    } else {
        // 显示后恢复滚动位置，用setTimeout确保iframe渲染完成
        setTimeout(() => {
            $iframe[0].contentWindow.scrollTo(0, iframeScrollTop);
        }, 0);
    }

    $div.toggle();
    $iframe.toggle();
});

注意：如果iframe加载的是跨域内容，受同源策略限制，无法直接访问其内部文档的滚动位置。这种情况下可以通过给iframe添加scroll事件监听，再用postMessage将滚动位置传递到父页面来实现记录。

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