在反应中滚动页面而不是 div 元素

Question

我正在使用具有父 div 的 react 制作我的网络简历 -

 <div
        className={`w-100  d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `}
      >

在这里我有多个子 div 但是当我运行我的代码时 div 的元素正在滚动而不是页面。当我给父 div 高度但它在某些浏览器上工作不正常时我需要一个好的解决方案以便元素保持静态和页面滚动。

提前致谢。

https://utkarsh0911.github.io/my_web_resume/

Answer 1

在您的 css 中删除类“landing_container__23Tq8”的背景附件属性。您可以尝试src/Pages/LandinPage.js使用以下代码段进行更新。import React, { Component ,Text,StyleSheet} from 'react'import Logo from '../Images/SiteLogo/logo.jpg'import MyNav from '../Components/MyNav'import styles from '../css/landing.module.css'import { Button, Container } from 'react-bootstrap'import MyButton from '../Components/MyButton'import Myphoto from '../Images/MyPhoto/photo.png'import MyRoundedImage from '../Components/MyRoundedImage'import AboutMe from './AboutMe'import Experience from './Experience'import Skills from './Skills'import MySimpleImage from '../Components/MySimpleImage'import Education from './Education'import resume from '../docs/resume.pdf'import MyFooter from '../Components/MyFooter'import MyJumbo from '../Components/MyJumbo'class LandingPage extends Component{&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={ `w-100 d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `} >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="container ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MyNav title="MyResume" items={["ABOUT","BLOG","CONTACT"]}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="d-flex justify-content-center "><h1 className={`font-weight-bold text-white text-center&nbsp; ${styles.h1}`}>WELCOME TO MY STUDIO!!</h1></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="d-flex flex-wrap justify-content-center mt-2 ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href={resume} target="_blank" rel="noopener noreferrer" download>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<MyButton&nbsp; &nbsp;title="Download CV" variant="success"/></a><MyButton&nbsp; title="Subscribe" variant="success"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div className="d-flex&nbsp; flex-wrap clearfix&nbsp; mt-1 flex-wrap justify-content-center align-items-center">&nbsp; &nbsp; &nbsp; &nbsp; <MyRoundedImage src={Myphoto}/>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; <div className="bg-white">&nbsp; &nbsp; <AboutMe />&nbsp; &nbsp; <MyJumbo title="EXPERIENCE"/>&nbsp; &nbsp; &nbsp;<div className={styles.expContainer}>&nbsp; &nbsp; <Experience/>&nbsp; &nbsp; </div>&nbsp; &nbsp; <MyJumbo title="SKILLS"/>&nbsp; &nbsp; <Skills/>&nbsp; &nbsp; <MyJumbo title="EDUCATION"/>&nbsp; &nbsp; <Education/>&nbsp; </div>{/* <MyFooter/> */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default LandingPage基本上，滚动很好；但是，abackground从后面的部分开始就不见了About Me。祝你好运...