Next js scroll event not calling on scroll?

Question

  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;

score 2 · Accepted Answer · answered Feb 09 '22 at 10:38

2

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.

Try to replace Container with normal div and check
As mentioned by you that it is working fine in another project, So please check your global CSS and LandingPage.module.css there must be some CSS which is not allowing to scroll, you can test by removing both the CSS and check

answered Feb 09 '22 at 10:38

amulabasana

161
5

You are right global css was causing some trouble, fixed it working Now. – Abdus Sattar Nishad Feb 10 '22 at 07:35
I have been set min-height: 100vh; and height: 100%; but it wont work – Dec 28 '22 at 06:25

Next js scroll event not calling on scroll?

1 Answers1