I want to use this cool scroll effect in one of my pages.The functional component has the same exact HTML as in the codepen. The script is in a separate file that is imported inside the component file. The problem is this line doesn't work
var well = document.getElementById('well');
I tried to import the JS-file into a variable and the call it in a useEffect hook just to make sure that hte script is run after the DOM is rendered. But it still doesn't work. What do I do to make the script work in my component?
Did you try importing the script like this ?
useEffect(() => {
const script = document.createElement('script');
script.src = "source of the js file";
script.async = false;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);