时间戳

首页 > 解决方案 > 无论滚动如何，如何在鼠标滚轮上增加 1？

javascript - 无论滚动如何，如何在鼠标滚轮上增加 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>

标签： javascriptreactjs

解决方案

您可以使用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”后不起作用。

推荐阅读