ReactJS应用控制鼠标滚动步长：实现每次滚动一屏高度

一、实现每次滚动一屏高度 #

要让React应用每次鼠标滚动直接滚一屏，核心是拦截默认滚动行为，手动控制滚动距离：

实现代码 #

import { useEffect } from 'react';

function FullScreenScrollApp() {
  useEffect(() => {
    const handleWheel = (e) => {
      // 阻止浏览器默认滚动逻辑
      e.preventDefault();
      
      // 获取当前视口的高度
      const viewportHeight = window.innerHeight;
      // 根据滚动方向判断是向上还是向下滚动
      const scrollDirection = e.deltaY > 0 ? 1 : -1;
      
      // 执行整屏滚动，可选添加平滑动画
      window.scrollBy({
        top: viewportHeight * scrollDirection,
        behavior: 'smooth'
      });
    };

    // 添加滚轮事件监听，必须设置passive: false才能调用preventDefault
    window.addEventListener('wheel', handleWheel, { passive: false });
    
    // 组件卸载时移除监听
    return () => window.removeEventListener('wheel', handleWheel);
  }, []);

  return (
    <div className="app-container">
      {/* 确保每个内容区块高度为100vh，对应一屏 */}
      <section style={{ height: '100vh', background: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        第一屏内容
      </section>
      <section style={{ height: '100vh', background: '#e5e5e5', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        第二屏内容
      </section>
      <section style={{ height: '100vh', background: '#d5d5d5', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        第三屏内容
      </section>
    </div>
  );
}

export default FullScreenScrollApp;

注意事项 #

• { passive: false }是必填项，否则部分浏览器会阻止调用e.preventDefault()，导致默认滚动无法拦截
• 如果不需要平滑滚动，可移除behavior: 'smooth'，改为即时跳转
• 若要支持触摸滑动，需额外添加touchstart/touchmove事件处理逻辑，避免触摸操作冲突

二、跨设备/浏览器检测鼠标滚动步长 #

如果无法强制设置滚动步长（比如部分浏览器限制或需要适配用户习惯），可以通过监听滚轮事件获取原生滚动步长：

实现代码 #

import { useState, useEffect } from 'react';

function ScrollStepDetector() {
  const [averageStep, setAverageStep] = useState(null);

  useEffect(() => {
    const handleWheel = (e) => {
      let step = Math.abs(e.deltaY);
      
      // 处理不同的滚动模式（部分旧设备/浏览器可能使用线或页模式）
      switch (e.deltaMode) {
        case 1: // 线模式，每线约16px，可根据实际情况调整
          step *= 16;
          break;
        case 2: // 页模式，直接对应视口高度
          step = window.innerHeight;
          break;
      }

      // 多次采样取平均值，避免单次异常值影响结果
      setAverageStep(prev => prev ? (prev + step) / 2 : step);
    };

    window.addEventListener('wheel', handleWheel, { passive: true });
    
    return () => window.removeEventListener('wheel', handleWheel);
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <p>当前检测到的平均滚动步长：{averageStep ? `${Math.round(averageStep)}px` : '正在检测...'}</p>
    </div>
  );
}

export default ScrollStepDetector;

说明 #

• deltaY是标准属性，大部分现代浏览器和设备都支持，正值代表向下滚动，负值代表向上滚动
• 部分滚轮设备会触发多次小步长滚动（比如触控板的平滑滚动），取平均值能得到更贴近用户实际操作的步长
• deltaMode用于区分滚动单位：0为像素（默认）、1为线、2为页，处理后能覆盖更多设备场景

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