scrollIntoView()首次渲染后导航返回时失效问题求助

针对SvelteKit中导航回页面时scrollIntoView失效的问题，给出以下几种可行方案：

1. 监听页面导航状态触发滚动 #

利用SvelteKit的page store监听路由变化，当导航到目标页面且参数匹配时执行滚动操作，确保导航后能触发：

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

export let data; // 从load函数获取的页面数据

onMount(() => {
  const unsubscribe = page.subscribe(currentPage => {
    if (currentPage.params.symbol === data.symbol) {
      const targetId = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
      const el = document.getElementById(targetId);
      
      if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  });

  return unsubscribe; // 组件销毁时取消订阅
});

2. 禁用浏览器滚动恢复 #

SvelteKit默认会恢复页面之前的滚动位置，可能覆盖自定义滚动逻辑。可以在页面的load函数中强制设置滚动位置：

// +page.ts
export async function load({ params }) {
  // 你的数据加载逻辑
  const data = await fetchCalendarData(params.symbol);

  return {
    data,
    scroll: { top: 0 } // 强制滚动到顶部，可按需调整
  };
}

也可以在导航链接上直接指定滚动行为：

<a href="/{symbol}" data-sveltekit-scroll="top">返回日历页面</a>

3. 等待DOM完全更新后执行滚动 #

在afterUpdate中使用svelte/tick等待DOM彻底更新完成，再执行滚动操作，确保元素布局稳定：

import { afterUpdate, tick } from 'svelte';

export let data;

afterUpdate(async () => {
  if (!data.calendar.months[data.symbol]) return;

  await tick(); // 等待DOM更新完成
  const targetId = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
  const el = document.getElementById(targetId);

  if (el) {
    el.scrollIntoView({ behavior: 'auto', block: 'start' });
  }
});

4. 判断元素是否在视口再执行滚动 #

如果元素本来就在视口内，scrollIntoView不会有明显效果，可以先判断元素位置，仅当不在视口时触发滚动：

import { afterUpdate } from 'svelte';

export let data;

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

afterUpdate(() => {
  if (!data.calendar.months[data.symbol]) return;

  const targetId = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
  const el = document.getElementById(targetId);

  if (el && !isElementInViewport(el)) {
    el.scrollIntoView();
  }
});

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