Lenis 平滑滚动库在 Next.js 中的页面导航问题解决方案

问题背景

在使用 Lenis 平滑滚动库与 Next.js 框架结合开发时，开发者可能会遇到一个常见问题：当从一个未完全滚动到底部的页面导航到新页面时，新页面不会自动滚动到顶部。这会导致用户体验不一致，特别是当页面内容较长时，用户可能会在新页面中看到中间位置的内容而非预期的顶部内容。

问题分析

这个问题源于 Lenis 平滑滚动库的工作机制。Lenis 接管了页面的滚动行为，当页面切换时，如果前一个页面没有完成滚动动画，Lenis 的状态可能会影响到新页面的初始滚动位置。在传统的网页应用中，页面导航通常会重置滚动位置，但在使用 Lenis 的单页应用(SPA)或现代框架如 Next.js 中，这种行为需要手动处理。

解决方案

原始实现的问题

最初，开发者可能会简单地使用 ReactLenis 组件包裹应用内容：

"use client";
import { ReactLenis } from "@studio-freight/react-lenis";
import { PropsWithChildren } from "react";

const Lenis = ({ children }: PropsWithChildren) => {
  return (
    <ReactLenis className="h-full" options={{ lerp: 0.1 }} root>
      {children}
    </ReactLenis>
  );
};

这种实现虽然提供了平滑滚动效果，但没有处理页面导航时的滚动位置重置问题。

改进后的解决方案

通过结合 Next.js 的路由钩子和 Lenis 的 API，我们可以创建一个更完善的解决方案：

"use client";
import { ReactLenis, useLenis } from "@studio-freight/react-lenis";
import { usePathname, useSearchParams } from "next/navigation";
import { PropsWithChildren, useEffect } from "react";

const LenisProvider = ({ children }: PropsWithChildren) => {
  const lenis = useLenis();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (lenis) {
      lenis.stop();
    }

    const handleScrollToTop = () => {
      if (lenis) {
        lenis.start();
        window.scrollTo(0, 0);
      }
    };

    handleScrollToTop();
  }, [pathname, searchParams, lenis]);

  return (
    <ReactLenis className="h-full" options={{ lerp: 0.1 }} root>
      {children}
    </ReactLenis>
  );
};

解决方案解析

1. 路由变化监听：使用 Next.js 的 usePathname 和 useSearchParams 钩子来检测路由变化。

2. Lenis 实例获取：通过 useLenis 钩子获取当前 Lenis 实例。

3. 滚动控制：

   • 在路由变化时，首先调用 lenis.stop() 暂停 Lenis 的滚动动画
   • 然后使用原生 window.scrollTo(0, 0) 将页面重置到顶部
   • 最后调用 lenis.start() 重新启用 Lenis 的平滑滚动

4. 依赖项处理：将 pathname、searchParams 和 lenis 作为 useEffect 的依赖项，确保任何路由变化都会触发滚动重置。

注意事项

1. 版本选择：注意使用最新版本的 Lenis，官方推荐使用 lenis/react 而非已废弃的 @studio-freight/react-lenis。

2. 性能考虑：频繁的路由变化可能会导致多次滚动重置，在实际应用中应考虑优化策略。

3. 平滑过渡：如果需要更平滑的页面过渡效果，可以结合 CSS 过渡或动画来实现。

总结

通过这种解决方案，开发者可以在保留 Lenis 平滑滚动效果的同时，确保页面导航时始终从顶部开始，提供一致的用户体验。这种模式也展示了如何将第三方库与现代前端框架的路由系统进行深度集成，解决常见的交互问题。