实现 React 应用中自定义鼠标滚轮滚动步长（如整屏滚动）

在 react 中无法直接修改浏览器原生滚轮步长，但可通过监听 `wheel` 事件、阻止默认行为并手动控制 `scrolltop`，实现设备无关的整屏/自定义步长滚动效果。

要让 react 应用响应鼠标滚轮时以「整屏高度」为单位滚动（即每次滚轮触发，页面垂直位移恰好为 window.innerHeight），核心思路是：拦截原生滚动行为，统一映射 deltaY 到预设步长，并平滑或精确应用到容器滚动位置。

✅ 推荐实现方式（React 函数组件 + useRef + useEffect）

import React, { useRef, useEffect } from 'react';  const FullPageScroll = () => {   const containerRef = useRef(null);    useEffect(() => {     const container = containerRef.current;     if (!container) return;      const handleWheel = (e: WheelEvent) => {       e.preventDefault(); // 关键：禁用原生滚动        // 统一归一化滚动方向与量级（兼容 macOS trackpad、Windows 鼠标、触控板惯性）       const delta = e.deltaY > 0 ? 1 : -1; // 方向标准化：+1 向下，-1 向上       const step = window.innerHeight * 0.9; // 可微调，如 0.9 避免边界跳变        container.scrollTo({         top: container.scrollTop + delta * step,         behavior: 'smooth', // 或 'auto' 实现瞬时整屏跳转       });     };      container.addEventListener('wheel', handleWheel, { passive: false });     return () => container.removeEventListener('wheel', handleWheel);   }, []);    return (     
       {/* 你的页面内容，确保总高度 > 100vh */}       
Section 1
       
Section 2
       
Section 3
     
   ); };  export default FullPageScroll;

? 关键说明与注意事项

• e.preventDefault() 不可省略：否则原生滚动与手动滚动将叠加，导致失控。
• 避免直接使用 event.deltaY 原值：不同设备（如 mac 触控板 vs Logitech 鼠标）的 deltaY 量级差异极大（±10 ~ ±100+），直接除法缩放（如 /n）难以跨设备一致。方向标准化（math.sign(e.deltaY)）+ 固定步长 是更鲁棒的方案。
• scrollTo({ behavior: ‘smooth’ }) 提供原生平滑动画；若需瞬时整屏切换（如单页导航），改用 ‘auto’ 并配合 useLayoutEffect 可进一步消除视觉延迟。
• 移动端兼容性：wheel 事件在 ios safari 中支持有限，如需全面覆盖，建议补充 touchmove + gesturestart 检测，或使用第三方库（如 framer-motion 的 useScroll 或 react-scroll-wheel-handler）。
• 无障碍提示：整屏滚动可能影响键盘用户和屏幕阅读器体验，建议通过 tabIndex={0} 和 aria-label 明确容器用途，并提供“返回顶部”等辅助导航。

✅ 总结

无需依赖用户设备的原始滚轮灵敏度，React 中实现可控滚动步长的本质是：接管 wheel 事件 → 标准化方向 → 应用固定逻辑步长 → 手动驱动滚动。该方案轻量、跨浏览器、易维护，是构建全屏滚动型落地页、产品介绍页或演示站点的理想基础。