前端实战：如何实现用户上次阅读位置恢复

// 1. 工具函数：找当前最接近视口顶部的 heading 元素
function getCurrentSection() {
  const headings = document.querySelectorAll('h2,h3'); // 或其他章节标志
  let current = null;
  let minDistance = Infinity;
  headings.forEach(h => {
    const rect = h.getBoundingClientRect();
    const distance = Math.abs(rect.top); // 距离视口顶部
    if (distance < minDistance) {
      minDistance = distance;
      current = h;
    }
  });
  return current?.id;
}

// 2. 节流更新 hash & storage
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      const sectionId = getCurrentSection();
      if (sectionId) {
        // 更新 URL hash（不刷新页面）
        history.replaceState(null, '', `#${sectionId}`);
        // 同时存 localStorage（key 建议带文章唯一 id）
        localStorage.setItem(`read-pos-${location.pathname}`, sectionId);
      }
      ticking = false;
    });
    ticking = true;
  }
}, { passive: true });

// 3. 页面加载时恢复
window.addEventListener('load', () => {
  let targetId = location.hash.slice(1); // 优先 hash
  if (!targetId) {
    targetId = localStorage.getItem(`read-pos-${location.pathname}`);
  }
  if (targetId) {
    const el = document.getElementById(targetId);
    if (el) {
      // 可加一点偏移，避免正好卡在顶部看不见标题
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 或 window.scrollTo(0, el.offsetTop - 80);
    }
  }
});

优点：内容布局变化也不容易漂移，用户可直接分享带 # 的链接。

2. IntersectionObserver + 探针元素（适合动态/无限加载内容）

思路：在文章中每隔 N 段插入一个透明的'探针'div（高度很小），用 IO 观察哪个探针进入视口，就记录它的 data-id。

<p>段落内容...</p>
<div class="probe" data-id="para-15"></div>
<p>下一段...</p>

const probes = document.querySelectorAll('.probe');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const id = entry.target.dataset.id;
      localStorage.setItem(`read-pos-${location.pathname}`, id);
      // 可选：更新 URL hash 如 #para-15
    }
  });
}, { threshold: 0.8 }); // 进入 80% 就算'读到'
probes.forEach(p => observer.observe(p));

// 恢复时
const savedId = localStorage.getItem(`read-pos-${location.pathname}`);
if (savedId) {
  document.querySelector(`[data-id="${savedId}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

优点：对懒加载、虚拟列表友好，内容增删不影响已记录的区块。

3. 最简单方案：scrollY + localStorage（适合静态页）

// 保存（节流 200ms）
let saveTimer;
window.addEventListener('scroll', () => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => {
    localStorage.setItem(`scroll-${location.pathname}`, window.scrollY);
  }, 200);
});

// 恢复
window.addEventListener('load', () => {
  const saved = localStorage.getItem(`scroll-${location.pathname}`);
  if (saved) {
    window.scrollTo(0, parseInt(saved));
  }
});

注意：内容高度变化会导致漂移 → 所以优先用上面两种。

4. Vue/React Router 项目额外福利

// Vue Router
const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition; // 浏览器前进/后退
    return { top: 0 }; // 新页面默认顶部
    // 或结合 localStorage 自定义恢复
  }
});

// React Router v6
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function ScrollToTop() {
  const { pathname } = useLocation();
  useEffect(() => {
    const saved = localStorage.getItem(`scroll-${pathname}`);
    window.scrollTo(0, saved ? parseInt(saved) : 0);
  }, [pathname]);
  // ... 同时监听 scroll 保存
}

总结：推荐组合拳

1. 静态/半静态长文 → URL Hash + localStorage 双存（首选）
2. 无限滚动/动态内容 → IntersectionObserver 探针
3. SPA 路由切换 → 框架 scrollBehavior + storage 兜底
4. key 设计：用 location.pathname 或文章唯一 ID（如 /post/123 → read-pos-/post/123）
5. 清理：可加过期时间（如 7 天后自动删），避免 localStorage 塞满