React中实现类FullPage.js滚动吸附效果时滚动过慢的优化方案咨询

你遇到的滚动速度慢的问题，很大概率确实和频繁重渲染有关——你的代码里每次滚动都会调用setPos(window.scrollY)，而useState的更新会触发组件重新渲染，这会消耗浏览器资源，拖慢滚动的响应速度。另外还有几个小细节也可能影响效果，我来一步步帮你优化：

核心问题分析 #

• 每次滚动事件触发都更新pos状态，导致组件频繁重渲染，挤占了滚动动画的资源
• scrollIntoView({behavior:'smooth'})的动画速度是浏览器默认的，确实偏慢，而且无法直接自定义
• 代码里还有个小拼写错误：ref={traget}应该是ref={target}，这个虽然不影响运行，但可能导致后续逻辑出问题

优化方案 #

1. 用useRef替代useState存储滚动位置 #

useRef的更新不会触发组件重渲染，非常适合用来存储滚动位置这种不需要触发UI更新的状态：

const Page = () => { 
  const posRef = useRef(0); // 用ref存滚动位置，不触发重渲染
  const target = useRef(); 
  const [snap, setSnap] = useState(false); 

  const onScroll = () => { 
    posRef.current = window.scrollY; // 直接更新ref，不触发重渲染
    // 这里可以加入滚动方向判断、是否触发吸附的逻辑，而不是每次都更新状态
  }; 

  useEffect(() => { 
    window.addEventListener('scroll', onScroll); 
    return () => { 
      window.removeEventListener("scroll", onScroll); 
    } 
  },[]); 

2. 优化滚动触发逻辑，避免重复执行滚动动画 #

可以加个判断，只有当当前位置和目标位置差距足够大时才触发滚动，同时在滚动开始后暂时禁用监听，避免滚动过程中重复触发：

useEffect(() => {
  if (snap && target.current) {
    const targetTop = target.current.getBoundingClientRect().top + window.scrollY;
    // 只有当前位置和目标位置差距超过阈值才触发滚动
    if (Math.abs(posRef.current - targetTop) > 50) {
      // 用window.scrollTo自定义滚动，速度更快更可控
      window.scrollTo({
        top: targetTop,
        behavior: 'smooth' // 或者用第三方库自定义动画速度
      });
    }
    // 滚动完成后重置snap状态，避免重复触发
    setTimeout(() => setSnap(false), 1000);
  }
}, [snap]);

3. 自定义滚动速度（可选） #

如果觉得浏览器默认的smooth还是太慢，可以用第三方动画库（比如GSAP）来控制滚动动画的速度，示例：

import gsap from 'gsap';

// 替换之前的滚动逻辑
if (snap && target.current) {
  const targetTop = target.current.getBoundingClientRect().top + window.scrollY;
  gsap.to(window, {
    scrollTo: { y: targetTop },
    duration: 0.3, // 自定义动画时长，数值越小速度越快
    ease: 'power2.out'
  });
  setSnap(false);
}

修改后的完整代码示例 #

import { useState, useEffect, useRef } from 'react';

const Page = () => { 
  const posRef = useRef(0); 
  const target = useRef(); 
  const [snap, setSnap] = useState(false); 

  const onScroll = () => { 
    posRef.current = window.scrollY; 
    // 这里可以加入你的滚动方向判断、触发snap的逻辑，比如：
    // const prevPos = posRef.current;
    // const scrollDirection = window.scrollY > prevPos ? 'down' : 'up';
    // if (scrollDirection === 'down' && 触发条件) setSnap(true);
  }; 

  useEffect(() => { 
    window.addEventListener('scroll', onScroll); 
    return () => window.removeEventListener("scroll", onScroll); 
  },[]); 

  useEffect(() => {
    if (snap && target.current) {
      const targetTop = target.current.getBoundingClientRect().top + window.scrollY;
      if (Math.abs(posRef.current - targetTop) > 50) {
        window.scrollTo({
          top: targetTop,
          behavior: 'smooth'
        });
      }
      setTimeout(() => setSnap(false), 1000);
    }
  }, [snap]);

  return ( 
    <div> 
      <div ref={target}>目标组件</div> 
      {/* 其他页面内容 */}
    </div> 
  ) 
} 

export default Page

这样优化后，组件不会因为滚动频繁重渲染，滚动动画的响应速度会明显提升，同时也避免了不必要的滚动触发。

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