Javascript 滚动输入范围时阻止滚动div

发布于09月29日

我有一个div，固定的高度，和卷轴. 但是在这个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>
  );
}

Sandbox :https://codesandbox.io/s/modern-sun-lfyhlr?file=/src/App.js:23-738

推荐答案

使用onMouseEnter检测并添加防止滚动的事件

const [mouseEnter, setMouseEnter] = useState(false);

  useEffect(() => {
    if (!mouseEnter) {
      return;
    }
    window.addEventListener("wheel", preventScroll, { passive: false });
    return () => window.removeEventListener("wheel", preventScroll, false);
  }, [mouseEnter]);

  const preventScroll = (e) => {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.returnValue = false;
  };

  return (
    <Box
      border="1px solid #ccc"
      padding={2}
      display="flex"
      flexDirection="column"
      height={200}
      overflow="auto"
    >
      <input
        type="range"
        value={volume}
        onWheel={onwheelVolumne}
        onMouseEnter={() => setMouseEnter(true)}
        onMouseLeave={() => setMouseEnter(false)}
      />
      {Array(10)
        .fill(10)
        .map((i, idx) => (
          <p key={idx}>samnple</p>
        ))}
    </Box>
  );