useHorizontalScroll react
// custom Hook export const useHorizontalScroll = (scrollWidth: number) => { const elRef = useRef(); useEffect(() => { const el = elRef.current as HTMLElement; if (el) { const onWheel = (e) => { console.log(el); if (e.deltaY == 0) return; e.preventDefault(); el.scrollTo({ left: el.scrollLeft + scrollWidth * e.deltaY, behavior: 'smooth', }); }; el.addEventListener('wheel', onWheel); return () => el.removeEventListener('wheel', onWheel); } }); return elRef; }; //useage inside a component const Assessments = () => { const scrollRef = useHorizontalScroll(scrollWidth); return ( <div ref={scrollRef} > ...... )