Experience smooth scrolling by utilizing page scrolling instead of div elements in React programming

Looking for help with my web resume that I am building using react. The parent div is set up like this -

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

I have multiple child divs within the parent div, but when I run the code, the elements inside the div are scrolling instead of the whole page. I tried setting a height to the parent div, but it's not working properly across all browsers. Any suggestions on how to keep the elements static and allow the page to scroll smoothly?

Thank you in advance.

Checkout my web resume here

Answer №1

To fix the issue, delete the background-attachement property from the 'landing_container__23Tq8' class in your CSS file.

Answer №2

If you're looking to make some updates, consider editing the file src/Pages/LandinPage.js with the code snippet provided below.

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
{
    render() {
        return (


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

              <div className="container ">
            <MyNav title="MyResume" items={["ABOUT","BLOG","CONTACT"]}/>
            </div>

            <div className="d-flex justify-content-center ">
<h1 className={`font-weight-bold text-white text-center  ${styles.h1}`}>WELCOME TO MY STUDIO!!</h1>
</div>


            <div className="d-flex flex-wrap justify-content-center mt-2 ">




            <a href={resume} target="_blank" rel="noopener noreferrer" download>

           <MyButton   title="Download CV" variant="success"/></a>




<MyButton  title="Subscribe" variant="success"/>


           </div>


<div className="d-flex  flex-wrap clearfix  mt-1 flex-wrap justify-content-center align-items-center">
        <MyRoundedImage src={Myphoto}/>
        </div>

  <div className="bg-white">
    <AboutMe />
    <MyJumbo title="EXPERIENCE"/>



     <div className={styles.expContainer}>
    <Experience/>

    </div>



    <MyJumbo title="SKILLS"/>
    <Skills/>



    <MyJumbo title="EDUCATION"/>
    <Education/>
  </div>

{/* <MyFooter/> */}

            </div>

        )
    }
}




export default LandingPage

Though everything seems to be in order, don't forget to add a background for the section starting from About Me.

Best of luck on your coding journey!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for implementing a "night mode" feature using CSS?

I have a vision for a website that offers both a 'day' and 'night mode', providing users with a light and dark version of the site. However, I'm struggling to find the best way to achieve this. Initially, I attempted creating two ...

Exploring Next.js dynamic imports using object destructuring

import { UDFCompatibleDatafeed } from "./datafeeds/udf/src/udf-compatible-datafeed.js"; I'm facing a challenge in converting the above import to a dynamic import in Next.js. My attempt was as follows: const UDFCompatibleDatafeed = dynamic(( ...

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

In VueJs, I am working on retrieving the ID and value of the element that has been clicked in order to successfully submit the data to

In my project, I am working on a feature that involves toggling job offers between visible and invisible using a toggle button. When the page loads, a GET request retrieves the status (true or false) from the database to determine whether the toggle button ...

Is there a way to add to a dropdown option in select2?

I am in need of creating a dropdown feature that offers users the ability to: 1. Automatically fill in options (based on predetermined values) 2. Add a brand new option if none of the current choices are suitable. I came across select2 as an easy way to i ...

Displaying Child1 on hover in CSS is simple using the Parent > Child1:hover selector. But how can we display Child2 using

Is there a way to modify my CSS Combo Box to display the menu div when hovering over the button div instead of the dropdown div? I have a container div with a dropdown div containing a button and a hidden menu. Currently, the menu is displayed when hoveri ...

Guide to dynamically loading webpage content based on URL with JavaScript

During a recent interview, I was challenged to develop a code snippet that would highlight the URL if it contained a specific keyword. Admittedly, I am unsure how to achieve this using JavaScript... ...

When a child component sends props to the parent's useState in React, it may result in the return value being undefined

Is there a way to avoid getting 'undefined' when trying to pass props from a child component to the parent component's useState value? Child component const FilterSelect = props => { const [filterUser, setFilterUser] = useState('a ...

Surprising results from combining ng-mousedown with ng-click

I am working with the following HTML structure: <label ng-mousedown="mousedownHandler($event)" ng-click="clickHandler($event)"> <input type="checkbox" /> </label> Within my scope, I have the following methods defined: $scope ...

Refine collection of objects based on a separate set of objects

I need to filter an array of objects based on another array of objects. I currently have two arrays of objects structured like this: const array = [ { id: 1, name: 'a1', sub: { id: 6, name: 'a1 sub' } }, { id: 2, name: 'a ...

Trouble Arising from jQuery Navigation Links

I'm currently working on implementing a jQuery Menu that I came across online. You can find it here: However, I've encountered an issue where the menu doesn't seem to allow links to URLs. I attempted to remove e.preventDefault from the scr ...

Optimizing AngularJS ng-repeat for Top Performance and Benchmarking

I have been conducting performance tests on AngularJS to determine its compatibility with our application. To assess and compare DOM creation speed, I developed a JSFiddle example where users can experiment with different numbers of items to create. The g ...

Tips for centering multiple images vertically within a div

Currently, I am using jQuery.carouFredSel for displaying banners. Everything is working fine except for one issue - the banners have variable heights which causes them to align at the top in the slider. I need a solution to align shorter banners in the mid ...

Using the attribute data-ng-repeat along with the <option> tag allows for dynamic iteration and

Hello there, I am a beginner with AngularJS and I am struggling to understand how to create my <option> list. I would like my output to resemble the example in this fiddle: http://jsfiddle.net/XdpJv/ This is what my current code looks like: <se ...

Guide on creating a sitemap using Express.js

I've been working with the sitemap.js package from https://www.npmjs.org/package/sitemap While I can add URLs to the sitemap manually, my challenge lies in adding URLs based on data retrieved from MongoDB. Since fetching data from MongoDB is asynchro ...

What is the best way to increase the size of the left margin?

The h1 text needs to be positioned more towards the middle of the screen, but I'm having trouble with the left margin. Adjusting the margin size in pixels and percentages doesn't seem to have any effect on the page. Changing the background color ...

Creating promises using the latest Breeze Angular Service: A comprehensive guide

In the process of updating my angular/breeze application, I wanted to incorporate the new breeze angular service for improved performance and functionality. The documentation guided me on removing the Q.js file and other dependencies, but I've encount ...

Three.js: Objects in the distance appear more subtle

Currently, I am developing a three.js scenario that showcases textured point sprites. These sprites obtain their textures from a single uniform, which is a 2D canvas containing the alphabet: https://i.stack.imgur.com/Ceh9x.png In my scene, all the letter ...

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

Despite the updates, Express JS PUT request does not successfully save changes

Currently, I have an Express JS application where I am attempting to update an existing user's name using the PUT method. The schema I am working with is a nested array and is structured like this: https://i.sstatic.net/WDIse.png The code snippet I ...