CODEWITHSUNDEEP
javascriptreactjs
Naterz
Naterz

Reputation: 437

how to increment on mouse wheel by 1 regardless of the scroll?

I am trying to increment the number by one no matter how long the user mouse wheel scrolls. It increases by 1 if I move the mouse wheel a little but jumps if i use the mouse wheel longer. How would I increment by one regardless?

 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>

Upvotes: 1

Views: 808

Answers (2)

Lucas L.
Lucas L.

Reputation: 437

You could use 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: But this will make your code (ability to change the initial number of "number") to not work after the number is changed to "number + 1".

Upvotes: 1

Zain Zafar
Zain Zafar

Reputation: 936

This seems to work but has some lag into it. But does the job.

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

Upvotes: 0

Related Questions