javascript - 滚动类型 ="number"输入以更改其值 : How to stop parent's scrolling

Question

我在 overflow: auto 容器中有一个固定尺寸的表单。当表单比容器大时，容器会出现滚动条。都好。现在表单中的输入之一是 type="number"。这很方便，因为浏览器提供了使用鼠标滚轮更改其值的功能。太棒了。

现在的问题:

当我使用鼠标滚轮更改这些输入的值时，如何防止容器滚动？

这似乎是一个常见问题，但我没有找到任何干净的解决方案。 请注意，我不想禁用滚动，也不想让滚动条消失，我只是想停止将轮子事件传播到父容器，当在特定类型的输入中捕获时，如果有道理或有可能。

我正在使用带有 JSX 语法和 Material-UI 组件的 React。

在输入上添加 onWheel={e => e.stopPropagation()} 或尝试拦截容器中的 onWheel 事件无效(我得到一个 Unable to preventDefault inside passive event listener due to target being treated as passive 错误)。

illustration of the problem

Answer 1

最后，将其添加到滚动的容器中对我有用。我不知道为什么会这样，处理函数是空的。如果有人能对此有所启发，那就太好了。

const Container = props => {
  const reference = React.createRef();

  useEffect(() => {
    const reff = reference.current;
    const wheelHandler = () => {}; // Empty handler???
    reff.addEventListener('wheel', wheelHandler);
    return () => reff.removeEventListener('wheel', wheelHandler);
  }, [reference])

  return <Box ref={reference} className={classes.content} {...props} />
}