滚轮操作input range时如何阻止外层可滚动div触发滚动？

我有一个固定高度、可滚动的div，其内部包含一个input range组件。当我对该input range触发滚轮事件时，外层div的滚动也会被触发，请问有没有办法在操作滚轮时阻止div的滚动？

示例代码 #

import { Box } from "@mui/material";
import { useState } from "react";

export default function App() {
  const [volume, setVolume] = useState(0);
  const onwheelVolumne = (e) => {
    if (e.deltaY < 0) {
      setVolume(volume + 10 > 100 ? 100 : volume + 10);
    } else {
      setVolume(volume - 10 < 0 ? 0 : volume - 10);
    }
    return false;
  };
  return (
    <Box
      border="1px solid #ccc"
      padding={2}
      display="flex"
      flexDirection="column"
      height={200}
      overflow="auto"
    >
      <input type="range" value={volume} onWheel={onwheelVolumne} />
      {Array(10)
        .fill(10)
        .map((i, idx) => (
          <p key={idx}>samnple</p>
        ))}
    </Box>
  );
}

解决方案 #

在React的事件处理逻辑中，return false无法同时阻止默认行为和事件冒泡，需要显式调用两个核心方法：

• e.preventDefault()：阻止滚轮的默认滚动行为
• e.stopPropagation()：阻止事件冒泡到外层可滚动Div

同时建议使用函数式更新setVolume(prev => ...)，避免闭包导致的状态更新不准确问题。修改后的完整代码如下：

import { Box } from "@mui/material";
import { useState } from "react";

export default function App() {
  const [volume, setVolume] = useState(0);
  const onwheelVolumne = (e) => {
    // 阻止事件冒泡与默认滚动行为
    e.preventDefault();
    e.stopPropagation();

    if (e.deltaY < 0) {
      setVolume(prev => Math.min(prev + 10, 100));
    } else {
      setVolume(prev => Math.max(prev - 10, 0));
    }
  };
  return (
    <Box
      border="1px solid #ccc"
      padding={2}
      display="flex"
      flexDirection="column"
      height={200}
      overflow="auto"
    >
      <input type="range" value={volume} onWheel={onwheelVolumne} />
      {Array(10)
        .fill(10)
        .map((i, idx) => (
          <p key={idx}>samnple</p>
        ))}
    </Box>
  );
}

内容的提问来源于stack exchange，提问作者Trần Hồng