React TypeScript+Material UI下数字输入框滚动时如何禁止主容器滚动

这个问题的核心原因是滚轮事件默认会沿DOM树向上冒泡，输入框内的滚动事件会被外层滚动容器捕获触发滚动，以下是两种可直接落地的实现方案：

方案1：阻止输入框滚轮事件冒泡（推荐） #

直接给数字输入框绑定wheel事件，阻止事件向外层传递，不会影响页面其他滚动逻辑，适配所有场景：

import { TextField, TextFieldProps } from '@mui/material';
import React from 'react';

const MuiNumberInput: React.FC<TextFieldProps> = (props) => {
  const handleWheel = (e: React.WheelEvent<HTMLInputElement>) => {
    // 阻止滚轮事件冒泡到外层容器
    e.stopPropagation();
    // 若不需要滚动修改输入框数值，可额外加 e.preventDefault()
  };

  return <TextField type="number" onWheel={handleWheel} {...props} />;
};

你直接替换项目中用到的数字输入框为这个封装组件即可生效。

方案2：全局监听输入框聚焦状态动态禁用外层滚动 #

如果项目中有大量数字输入框，不想逐个替换组件，可以用全局监听的方案：

import { useState, useEffect } from 'react';
import { Box, TextField } from '@mui/material';

const App: React.FC = () => {
  // 标记是否有数字输入框处于聚焦状态
  const [numberInputFocused, setNumberInputFocused] = useState(false);

  useEffect(() => {
    const handleFocus = (e: FocusEvent) => {
      const target = e.target as HTMLInputElement;
      if (target.tagName === 'INPUT' && target.type === 'number') {
        setNumberInputFocused(true);
      }
    };

    const handleBlur = (e: FocusEvent) => {
      const target = e.target as HTMLInputElement;
      if (target.tagName === 'INPUT' && target.type === 'number') {
        setNumberInputFocused(false);
      }
    };

    // 捕获阶段监听全局聚焦/失焦事件
    window.addEventListener('focus', handleFocus, true);
    window.addEventListener('blur', handleBlur, true);

    return () => {
      window.removeEventListener('focus', handleFocus, true);
      window.removeEventListener('blur', handleBlur, true);
    };
  }, []);

  return (
    {/* 外层滚动容器，动态控制overflow属性 */}
    <Box
      sx={{
        height: '100vh',
        overflowY: numberInputFocused ? 'hidden' : 'auto',
      }}
    >
      {/* 页面其他内容 */}
      <TextField type="number" label="数值输入" />
    </Box>
  );
};

如果你的外层滚动容器不是根窗口，只需要把overflow的控制逻辑对应到自定义的滚动容器上即可。

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