const [scrollStatus, setScrollStatus] = useState({ scrollDirection: null, scrollPos: 0 }); useEffect(() => { if (innerRef.current) { innerRef.current.addEventListener("scroll", handleScrollDocument); } return () => innerRef?.current.removeEventListener("scroll", handleScrollDocument); }, []); function handleScrollDocument() { if (!innerRef?.current) return; setScrollStatus((prev) => { // to get 'previous' value of state return { scrollDirection: innerRef.current.scrollTop > prev.scrollPos ? "down" : "up", scrollPos: innerRef.current.scrollTop }; }); }
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