Recently, I created a React code that displays a neon line from the top to the bottom of the page when scrolling. However, when I attempted to use this code in Next.js, it didn't work and I encountered an error stating "neonLine is null". Any ideas on why this is happening?
Below is the code snippet:
import React, { useState, useEffect } from "react";
import styles from "./Neon.module.css";
const Neon = () => {
const [scrolling, setScrolling] = useState(false);
useEffect(() => {
const handleScroll = () => {
setScrolling(true);
const neonLine = document.querySelector(".nLine");
const scrollTop = window.scrollY;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
neonLine.style.height = scrollPercentage + "%";
};
let scrollingTimeout;
const checkScrollStop = () => {
if (scrolling) {
setScrolling(false);
clearTimeout(scrollingTimeout);
} else {
const neonLine = document.querySelector(".nLine");
neonLine.style.transition = "height 0.5s ease-in-out";
}
};
window.addEventListener("scroll", handleScroll);
window.addEventListener("scroll", checkScrollStop);
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("scroll", checkScrollStop);
};
}, []);
return (
<div className={styles.con}>
<div className={styles.neon}></div>
<div className={styles.line}>
<div className={styles["nLine"]}></div>
</div>
</div>
);
};
export default Neon;