捕捉巧思：React 滚动恢复 150 行妙招

2023-11-12 17:30:22

作为前端开发人员，我们经常面临确保流畅用户体验的挑战，尤其是当涉及到滚动条时。想象一下这种情况：用户在长长的内容列表中向下滚动，然后点击一个项目进入详情页面。当他们返回列表时，他们希望看到它从他们离开的地方继续滚动。

幸运的是，借助 React 的强大功能，我们可以通过 150 行代码实现这种优雅的滚动恢复行为。本文将深入探讨这个便捷解决方案的实现步骤，帮助您提升用户体验。

捕捉滚动位置

实现滚动恢复的第一步是捕捉用户在离开列表之前滚动到的位置。为此，我们将使用 React 的 useLocation hook 来访问浏览器历史记录对象。

import { useLocation } from "react-router-dom";

const useScrollPosition = () => {
  const location = useLocation();

  useEffect(() => {
    if (location.state && location.state.scrollTop) {
      window.scrollTo({
        top: location.state.scrollTop,
        behavior: "smooth",
      });
    }
  }, [location]);
};

这个 useScrollPosition hook 监听 location 的变化，如果 location.state 中存在 scrollTop 属性，它将滚动窗口到该位置。

保存滚动位置

接下来，我们需要在用户离开列表页面时保存滚动位置。为此，我们将使用 React 的 useEffect hook 来监听页面卸载事件。

useEffect(() => {
  return () => {
    window.history.replaceState(
      { scrollTop: window.pageYOffset },
      document.title
    );
  };
}, []);

此 useEffect 在组件卸载时触发，它使用 window.history.replaceState 更新浏览器历史记录，并将 scrollTop 值存储在 state 对象中。通过替换当前历史记录条目，我们不会创建新条目，从而保持浏览器的后退按钮正常工作。

集成滚动恢复

现在我们已经有了捕捉和保存滚动位置的机制，我们可以将它们整合到我们的 React 组件中。

import { useScrollPosition } from "./useScrollPosition";

const MyList = () => {
  useScrollPosition();

  return (
    <div>
      {/* ... 列表内容 ... */}
    </div>
  );
};