Horizontal scroll on element when user scrolls up & down (React)
Tue Mar 09 2021 14:01:41 GMT+0000 (UTC)
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
Comments