React TypeScript：如何阻止输入框滚轮操作触发页面滚动溢出

针对你遇到的问题，核心是要在目标输入框触发滚轮事件时，阻断事件向页面滚动容器传递，同时保留页面整体的滚动能力。以下是两种React TS的实现方案，按需选择：

方案1：鼠标在输入框上滚动时阻止页面滚动 #

适合希望只有鼠标落在输入框上滚动时，输入框响应滚轮调整值、页面不滚动的场景：

import { useEffect, useRef } from 'react';

const WheelAdjustInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      // 确认滚轮事件来自目标输入框
      if (e.target === inputRef.current) {
        // 阻止事件冒泡到页面滚动容器，避免页面滚动
        e.stopPropagation();
        // 无需阻止默认行为，原生number输入框的滚轮增减会正常生效
      }
    };

    const input = inputRef.current;
    if (input) {
      input.addEventListener('wheel', handleWheel);
      return () => input.removeEventListener('wheel', handleWheel);
    }
  }, []);

  return <input type="number" ref={inputRef} step="1" />;
};

export default WheelAdjustInput;

说明： #

• 利用stopPropagation()切断事件向上传递，页面滚动容器不会收到滚轮事件，自然不会滚动；
• 如果是自定义数值输入组件，只需将inputRef指向组件内部的原生输入元素即可复用逻辑。

方案2：输入框聚焦时全局阻止页面滚动 #

适合输入框聚焦后，无论鼠标位置，滚轮都只调整输入框值的场景：

import { useEffect, useRef } from 'react';

const FocusLockInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const blockPageScroll = (e: WheelEvent) => {
      e.preventDefault();
    };

    const onFocus = () => {
      // 聚焦时给document绑定阻止滚动的事件，passive必须设为false才能调用preventDefault
      document.addEventListener('wheel', blockPageScroll, { passive: false });
    };

    const onBlur = () => {
      // 失焦时移除事件监听，恢复页面滚动
      document.removeEventListener('wheel', blockPageScroll);
    };

    const input = inputRef.current;
    if (input) {
      input.addEventListener('focus', onFocus);
      input.addEventListener('blur', onBlur);

      // 组件卸载时清理事件，避免内存泄漏
      return () => {
        input.removeEventListener('focus', onFocus);
        input.removeEventListener('blur', onBlur);
        document.removeEventListener('wheel', blockPageScroll);
      };
    }
  }, []);

  return <input type="number" ref={inputRef} step="1" />;
};

export default FocusLockInput;

说明： #

• 通过focus/blur事件切换页面滚动的锁定状态，精准控制滚动行为；
• { passive: false }是必填项，否则浏览器会因为事件被动监听而忽略preventDefault()调用。

为什么之前的方法没用？ #

• CSS的overflow属性是全局或容器级的控制，无法做到“仅在特定元素交互时禁用滚动”；
• 第三方滚动阻止库通常是全局锁定滚动，没有针对单个输入框的精细场景做适配，所以不符合需求。

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