useEffect(() => {
document.addEventListener("scroll", ()=> {
console.log('.................gotcha');
});
},[]);
I am wanting to fire an event when user is scrolling. I have used the above code to get the scroll event. But its not working. But the same code is working on another project
whole code
import Image from 'next/image';
import React, { useEffect, useRef, } from 'react';
import { useCallback } from 'react';
import { useState } from 'react';
import { Container } from "react-bootstrap";
import hostname from '../../lib/config';
import styles from './LandingPage.module.css';
function LandingPage({settings}) {
useEffect(() => {
document.addEventListener("scroll", ()=> {
console.log('.................gotcha');
});
},[]);
return (
<div>
<div style={{textAlign: 'center'}} className={styles.margin__top}>
<Image src={`${hostname}/${settings?.top?.image}`} height={850} width={2100} />
<div className={styles.top__image__text}>
<h1 style={{textAlign: 'center'}}>{settings?.top?.firstText}</h1>
<h3 style={{textAlign: 'center'}}>{settings?.top?.secondText}</h3>
<p style={{textAlign: 'center'}}>{settings?.top?.thirdText}</p>
</div>
{/* <div className="text-center" style={{marginTop: '-256px'}}><Image src="/assets/images/landingPage/2.png" height={250} width={500} /></div> */}
</div>
<Container>
<div className={styles.two__container__style}>
<div>
<Image src={`${hostname}/${settings?.top?.firstSection?.image}`} height={350} width={450} />
</div>
<div className={styles.content__style}>
<div dangerouslySetInnerHTML={{__html: `${settings?.firstSection?.text}`}} />
{/* <h2>Secure access, worldwide</h2>
<p>Connect reliably from anywhere, to anywhere. Our network of high-speed servers across 94 countries puts you in control.</p> */}
<button>Get Red Card VPN</button>
</div>
<div className={styles.content__style}>
<div dangerouslySetInnerHTML={{__html: `${settings?.secondSection?.text}`}} />
</div>
<div>
<Image src={`${hostname}/${settings?.secondSection?.image}`} height={350} width={450} />
</div>
</div>
<div className={styles.three__container__style}>
<div className={styles.mini__container__style}>
<Image src={`${hostname}/${settings?.thirdSection?.firstImage}`} height={120} width={200} className={styles.image__radius} />
<div dangerouslySetInnerHTML={{__html: `${settings?.thirdSection?.firstText}`}} />
</div>
<div className={styles.mini__container__style}>
<Image src={`${hostname}/${settings?.thirdSection?.secondImage}`} height={120} width={200} className={styles.image__radius} />
<div dangerouslySetInnerHTML={{__html: `${settings?.thirdSection?.secondText}`}} />
</div>
<div className={styles.mini__container__style}>
<Image src={`${hostname}/${settings?.thirdSection?.thirdImage}`} height={120} width={200} className={styles.image__radius} />
<div dangerouslySetInnerHTML={{__html: `${settings?.thirdSection?.thirdText}`}} />
</div>
</div>
</Container>
</div>
);
}
export default LandingPage;
As per your shared code, I had tried them in a new project with normal div instead of Container, my own CSS styles and hostname (as it is not shared in the post) and it is working fine. so please try below two options.