如何在SvelteKit单页网站中随滚动切换对应章节的URL？

不用jQuery，直接用原生Intersection Observer API结合SvelteKit的导航工具就能实现，步骤如下：

• 利用Svelte的onMount钩子在组件挂载后监听章节元素，onDestroy清理监听
• 用Intersection Observer检测章节是否进入视口
• 触发时通过SvelteKit的goto更新URL的hash部分，禁止自动滚动避免冲突

完整代码示例 #

<script>
  import { onMount, onDestroy } from 'svelte';
  import { goto } from '$app/navigation';

  let sectionObserver;

  onMount(() => {
    // 选择所有带id的章节元素，根据你的页面结构调整选择器
    const sections = document.querySelectorAll('section[id]');

    sectionObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const targetId = entry.target.id;
            // 更新URL hash，不触发自动滚动
            goto(`#${targetId}`, { noScroll: true, keepFocus: false });
          }
        });
      },
      {
        threshold: 0.5, // 元素50%进入视口时触发，可按需调整
        rootMargin: '0px 0px -30% 0px' // 底部偏移，减少频繁切换的情况
      }
    );

    sections.forEach(section => sectionObserver.observe(section));
  });

  onDestroy(() => {
    sectionObserver?.disconnect();
  });
</script>

<!-- 示例章节结构 -->
<section id="hero">首页横幅</section>
<section id="services">服务介绍</section>
<section id="contact">联系我们</section>

关键注意事项 #

• 选择器要匹配你页面中的章节元素，比如如果章节用div且有chapter类，就改成document.querySelectorAll('div.chapter[id]')
• threshold和rootMargin可以根据用户体验调整，比如设threshold: 0.7让章节大部分进入视口才更新URL
• goto的noScroll: true必须加，否则会触发SvelteKit的默认锚点滚动，导致页面跳变
• 如果章节是动态渲染的（比如从API获取），要在章节渲染完成后再初始化Observer，可以配合await tick()实现

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