Svelte中window.scroll()仅硬重载生效，onMount()调用无效

我希望特定组件每次挂载时将窗口滚动到指定位置，因此使用onMount()钩子调用window.scroll()方法，代码如下：

onMount(() => {
    window.scroll({
        top: 400,
        left: 100,
        behavior: "smooth",
    })
})

但问题是，该方法仅在浏览器手动硬重载页面时生效，在SvelteKit应用内导航到该页面时无效。我添加console.log验证onMount()可正常触发，但window.scroll()仍不工作，请问问题出在哪里？

核心原因 #

SvelteKit应用内导航时默认会恢复用户之前的滚动位置（依赖浏览器scrollRestoration特性），且内导航的页面渲染时序和硬刷新不同：onMount触发时，SvelteKit的滚动恢复逻辑可能尚未完成，导致自定义的window.scroll操作被后续的滚动恢复覆盖；或者执行时机过早，页面布局还未稳定，滚动目标位置的渲染状态还未就绪。

解决方法 #

方法1：延迟执行滚动操作

通过requestAnimationFrame或setTimeout将滚动操作推迟到下一个渲染帧，确保SvelteKit的滚动恢复逻辑已完成：

onMount(() => {
    requestAnimationFrame(() => {
        window.scroll({
            top: 400,
            left: 100,
            behavior: "smooth",
        });
    });
});

或使用setTimeout将任务推到事件循环末尾：

onMount(() => {
    setTimeout(() => {
        window.scroll({
            top: 400,
            left: 100,
            behavior: "smooth",
        });
    }, 0);
});

方法2：禁用自动滚动恢复

手动关闭浏览器的滚动恢复特性，避免SvelteKit覆盖自定义滚动操作：

onMount(() => {
    window.history.scrollRestoration = 'manual';
    window.scroll({
        top: 400,
        left: 100,
        behavior: "smooth",
    });
});

若需全局禁用，可在根layout的load函数中设置：

// +layout.js
export function load() {
    if (typeof window !== 'undefined') {
        window.history.scrollRestoration = 'manual';
    }
}

方法3：监听导航结束事件

利用SvelteKit的page store监听导航完成事件，在导航彻底结束后执行滚动：

import { page } from '$app/stores';
import { onMount } from 'svelte';
import { subscribe } from 'svelte/store';

onMount(() => {
    const unsubscribe = subscribe(page, () => {
        requestAnimationFrame(() => {
            window.scroll({
                top: 400,
                left: 100,
                behavior: "smooth",
            });
        });
    });
    return unsubscribe;
});

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