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}>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter