在 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 事件 → 标准化方向 → 应用固定逻辑步长 → 手动驱动滚动。该方案轻量、跨浏览器、易维护，是构建全屏滚动型落地页、产品介绍页或演示站点的理想基础。