Next.js中流畅惯性滚动的可行方案探寻

针对你遇到的卡顿、无滚动条、窗口调整失效等问题，结合你提到的优质实现效果，这里提供一套可行的实现思路，核心是复用原生滚动系统而非完全替换：

核心思路：基于原生滚动的惯性增强 #

不要用transform完全替代原生滚动逻辑，而是监听原生滚动事件，在滚动停止后通过动画模拟惯性效果，既保留原生滚动条，又解决适配问题。

1. 滚动速度捕捉与惯性动画实现 #

• 监听wheel和scroll事件，记录滚动的时间戳、位移值，计算实时滚动速度（位移差/时间差）。
• 当滚动停止（比如200ms内无新滚动事件），根据计算出的初始速度，通过requestAnimationFrame逐步衰减滚动偏移量，调用window.scrollTo或容器的scrollTop/scrollLeft完成惯性动画。
• 示例核心代码：

  'use client';
  import { useEffect, useRef } from 'react';
  
  export default function InertialScroll() {
    const velocityRef = useRef({ x: 0, y: 0 });
    const lastScrollRef = useRef({ x: window.scrollX, y: window.scrollY, time: Date.now() });
    const animationRef = useRef(null);
    const maxScrollRef = useRef({ y: 0 });
  
    const handleScroll = () => {
      const now = Date.now();
      const deltaX = window.scrollX - lastScrollRef.current.x;
      const deltaY = window.scrollY - lastScrollRef.current.y;
      const deltaTime = now - lastScrollRef.current.time;
      
      // 计算速度（像素/毫秒）
      velocityRef.current.x = deltaX / deltaTime;
      velocityRef.current.y = deltaY / deltaTime;
      
      lastScrollRef.current = { x: window.scrollX, y: window.scrollY, time: now };
      
      // 清除之前的惯性动画
      if (animationRef.current) cancelAnimationFrame(animationRef.current);
    };
  
    const handleInertia = () => {
      // 速度衰减系数（可调整，值越小惯性越弱）
      const decay = 0.95;
      let newY = window.scrollY + velocityRef.current.y * 16; // 16ms对应60帧
      
      // 边界判断
      newY = Math.max(0, Math.min(newY, maxScrollRef.current.y));
      
      if (Math.abs(velocityRef.current.y) > 0.1 && newY !== window.scrollY) {
        window.scrollTo(0, newY);
        velocityRef.current.y *= decay;
        animationRef.current = requestAnimationFrame(handleInertia);
      }
    };
  
    const handleResize = () => {
      maxScrollRef.current.y = document.documentElement.scrollHeight - window.innerHeight;
    };
  
    useEffect(() => {
      handleResize();
      window.addEventListener('scroll', handleScroll, { passive: true });
      window.addEventListener('resize', handleResize);
      // 滚动停止后触发惯性动画
      const scrollEndTimer = setInterval(() => {
        const now = Date.now();
        if (now - lastScrollRef.current.time > 200) {
          handleInertia();
        }
      }, 200);
  
      return () => {
        window.removeEventListener('scroll', handleScroll);
        window.removeEventListener('resize', handleResize);
        clearInterval(scrollEndTimer);
        if (animationRef.current) cancelAnimationFrame(animationRef.current);
      };
    }, []);
  
    return null;
  }
  

2. 性能优化 #

• 滚动事件监听添加passive: true，避免阻塞主线程。
• 用requestAnimationFrame执行惯性动画，保证60fps流畅度。
• 避免在滚动事件中做DOM操作，所有计算在内存中完成。

3. 窗口resize适配 #

• 监听resize事件，实时更新滚动容器的最大滚动边界值，确保惯性动画不会超出有效范围。

4. Next.js 适配细节 #

• 滚动逻辑必须放在客户端组件中（添加'use client'指令），避免服务端渲染时调用浏览器API报错。
• 若使用自定义滚动容器，需设置overflow: auto/scroll和固定尺寸，保证原生滚动条正常显示。

这种方案复用了原生滚动系统，既保留了滚动条，又解决了translate方案的resize失效问题，同时通过精细的速度计算和动画控制实现流畅的惯性效果，和你提到的优质实现逻辑方向一致。

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