Horizontal scroll on element when user scrolls up & down (React)

PHOTO EMBED

Tue Mar 09 2021 14:01:41 GMT+0000 (Coordinated Universal Time)

Saved by @desiboli #javascript #react.js #next.js #typescript

  const target = useRef<HTMLDivElement>(null);

  const listenScrollEvent = (event) => {
    const toLeft = event.deltaY < 0 && target.current.scrollLeft > 0;
    const toRight =
      event.deltaY > 0 &&
      target.current.scrollLeft <
        target.current.scrollWidth - target.current.clientWidth;

    if (toLeft || toRight) {
      event.preventDefault();
      event.stopPropagation();

      target.current.scrollLeft += event.deltaY;
    }
  };

  return (
    <div ref={target} onWheel={listenScrollEvent}>
content_copyCOPY

Horizontal scroll on element when user scrolls up & down example with React (refs, onWheel event) + Typescript