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;