如何在鼠标滚轮上按1递增，而不考虑滚动？

Question

无论用户鼠标滚轮滚动多长时间，我都会尝试将数字递增1。如果我移动鼠标滚轮一点，它会增加1，但如果我更长时间地使用鼠标滚轮，它就会跳跃。不管怎样，我如何递增1呢？

 const [number, setnumber] = useState(1);
  const listener = e => {
    e.preventDefault();
    setnumber(number + 1);
  };
  useEffect(() => {
    window.addEventListener("wheel", listener);
    return () => {
      window.removeEventListener("wheel", listener);
    };
  });
  return (
    <div className="App">
      <h1>{number}</h1>
      <h2>Number wheel</h2>
    </div>

Answer 1

您可以使用stopImmediatePropagation

const [number, setnumber] = useState(1);

  const listener = e => {
    setnumber(number + 1);
    e.stopImmediatePropagation();
  };

  useEffect(() => {
    window.addEventListener("wheel", listener);
  });

  return (
    <div className="App">
      <h1>{number}</h1>
      <h2>Number wheel</h2>
    </div>
  );

codesanbox：https://codesandbox.io/s/elastic-surf-qxerb?file=/src/App.js

PS:但这将使您的代码(更改“数字”的初始数字的能力)在数字更改为“数字+ 1”后不起作用。

Answer 2

这似乎是有效的，但有一些滞后。但却能做好这项工作。

export default function App() {
  const [number, setnumber] = useState(1);
  const [isScrolling, setIsScrolling] = useState(null);

  const listener = e => {
    e.preventDefault();
    // Clear our timeout throughout the scroll
    window.clearTimeout(isScrolling);

    // Set a timeout to run after scrolling ends
    setIsScrolling(
      setTimeout(() => {
        // Run the callback
        setnumber(number + 1);
      }, 50)
    );
  };

  useEffect(() => {
    window.addEventListener("wheel", listener);
    return () => {
      window.removeEventListener("wheel", listener);
    };
  });
  return (
    <div className="App">
      <h1>{number}</h1>
    </div>
  );
}

CodeSandbox Demo