🤖
React(Next.js)でスクロール量を測る
Next.jsでスクロール量に対して、cssを切り替えたかったので、実装方法をご紹介します。
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
window.scrollY > 200 ? setIsVisible(true) : setIsVisible(false);
};
useEffect(() => {
window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);
toggleVisibilityで関数を用意し、addEventListenerでスクロールイベントで発火させます。
Discussion