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