Svelte 5组件卸载前获取scrollY，求替代React useLayoutEffect的方案

你遇到的问题核心是清理函数的执行时机：默认的onDestroy、onMount清理函数以及普通$effect的清理函数，都是在组件DOM被移除后才执行的——此时页面内容高度变化，滚动位置可能已经重置为0。而React的useLayoutEffect清理函数是在DOM更新前（组件尚未被移除）执行，所以能拿到正确的滚动值。

在Svelte 5中，你可以用$effect.pre()的清理函数来实现相同的效果，它的执行时机是DOM更新前、组件卸载前，此时页面滚动位置还未被改变：

<script>
  import { $effect } from 'svelte';

  // 存储滚动位置的变量，可替换为localStorage等持久化方式
  let savedScrollY = 0;

  $effect.pre(() => {
    // 可选：组件挂载时的逻辑
    return () => {
      // 这个清理函数会在组件即将卸载、DOM未被移除时同步执行
      savedScrollY = window.scrollY;
      console.log(savedScrollY); // 此时能获取到正确的滚动位置
    };
  });
</script>

为什么这个方案有效？ #

• $effect.pre()的回调和清理函数都在DOM更新前触发，对应React中useLayoutEffect的执行时机。
• 组件卸载时，清理函数会在DOM元素被移除前运行，页面滚动状态还保持着组件存在时的样子，因此window.scrollY能拿到正确的值。

内容的提问来源于stack exchange，提问作者Jaya Surya Sarisa