下一个 js 滚动事件不调用滚动？

Question

  useEffect(() => {     

        document.addEventListener("scroll",  ()=> {  
              console.log('.................gotcha');
          
          });  
       

     },[]);

我想在用户滚动时触发一个事件。我已经使用上面的代码来获取滚动事件。但它不起作用。但是相同的代码正在另一个项目中工作

完整代码

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;

Answer 1

根据你的共享代码，我在一个新项目中尝试过使用普通 div 而不是 Container，我自己的 CSS 样式和主机名（因为它没有在 post) 并且工作正常。所以请尝试以下两个选项。

尝试用普通的div替换Container并检查
正如你提到的，它在另一个项目中工作正常，所以请检查你的全局 CSS 和 LandingPage.module.css 必须有一些 CSS 不允许滚动，您可以通过删除 CSS 和 check

下一个 js 滚动事件不调用滚动？

Next js scroll event not calling on scroll?

javascript

reactjs

next.js

react-scroll