scrollIntoView滚动完成后位置无法保持问题求助

问题出在浏览器的自动滚动恢复机制——页面加载完成后，浏览器会自动回到刷新前的滚动位置，这会覆盖你通过scrollIntoView设置的滚动操作。以下是几种可行的解决方法：

方法一：延迟执行滚动操作 #

给你的滚动逻辑加个小延迟，等浏览器完成默认滚动恢复后再执行：

function init() {
    const id = window.location.href.split('#!')[1];
    console.log(id);
    // 延迟100ms执行，确保浏览器默认滚动完成
    setTimeout(() => {
        document.getElementById(id).scrollIntoView({
            behavior: "auto",
            block: "center",
            inline: "center"
        });
    }, 100);
}

延迟时间可根据页面实际加载速度调整，一般100-200ms足够覆盖浏览器的默认滚动流程。

方法二：禁用浏览器的滚动恢复功能 #

直接关闭浏览器的自动滚动恢复机制，让你的滚动逻辑完全主导页面位置：

function init() {
    // 禁用自动滚动恢复
    history.scrollRestoration = 'manual';
    const id = window.location.href.split('#!')[1];
    console.log(id);
    document.getElementById(id).scrollIntoView({
        behavior: "auto",
        block: "center",
        inline: "center"
    });
}

如果想让这个设置更早生效，可以把history.scrollRestoration = 'manual';放在<head>内的脚本中，确保页面开始加载时就禁用该机制：

<head>
    <script>
        history.scrollRestoration = 'manual';
    </script>
</head>

方法三：利用原生锚点定位 #

把URL中的#!替换为标准的#锚点，让浏览器原生处理滚动，再用scrollIntoView调整到居中位置：

function init() {
    const id = window.location.href.split('#!')[1];
    console.log(id);
    // 替换为标准锚点，触发浏览器原生滚动
    window.location.hash = id;
    // 调整到居中位置
    document.getElementById(id).scrollIntoView({
        behavior: "auto",
        block: "center",
        inline: "center"
    });
}

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