Skip to content

Instantly share code, notes, and snippets.

@kate0n

kate0n/Determining the direction of the scroll

Last active November 2, 2021 16:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kate0n/ed2d33f14458b986e60e090a609b1d7c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kate0n/ed2d33f14458b986e60e090a609b1d7c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Determining the direction of the scroll
const [y, setY] = useState(window.scrollY);
const handleNavigation = useCallback(
(e) => {
const window = e.currentTarget;
if (y > window.scrollY) {
console.log("scrolling up");
setHeaderHidden(false);
} else if (y - window.scrollY < -10) {
setHeaderHidden(true);
console.log("scrolling down");
}
setY(window.scrollY);
console.log("y", y, height);
},
[y],
);
useEffect(() => {
setY(window.scrollY);
window.addEventListener("scroll", handleNavigation);
return () => {
window.removeEventListener("scroll", handleNavigation);
};
}, [handleNavigation]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment