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;

amulabasana · Accepted Answer · 2022-02-09 10:38:14Z

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 9, 2022 at 10:38

amulabasana

1615 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdus Sattar Nishad Over a year ago

You are right global css was causing some trouble, fixed it working Now.

user18209107 Over a year ago

I have been set min-height: 100vh; and height: 100%; but it wont work

Nicolás Oleinizak · Accepted Answer · 2024-02-28 14:00:32Z

I found useful setting some other option to the event listener, as well as using a diferent approach for getting the scroll position.

To actually get the event triggered, you can set the capture to true this way:

useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true, capture: true});
    return () => {
       window.removeEventListener("scroll", handleScroll);
    }
}, []);

About the position, you can expect an Event parameter in your handler function and get the property scrollTop of the element target:

const handleScroll = (e) => {
    console.log(e.target.scrollTop);
}

Be aware the the capture=true option might have unexpected behaviors. This is what documentation says:

A boolean value indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false. (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture)

Goodnews · Accepted Answer · 2024-05-06 14:55:35Z

0

For anybody else facing this issue, what I did was to remove the css height property of 100vh from the parent div. If using Bootstrap, do not use vh-100 for the parent div. Happy coding!!

answered May 6, 2024 at 14:55

Goodnews

11 bronze badge

Collectives™ on Stack Overflow

Next js scroll event not calling on scroll?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related