I am building a website with react and I am using a navigation bar. I implemented react-scroll and with Link I was able to scrollTo each css id element. But I also want to scroll (with fingers) through the website.

This is my NavigationBar:

const ContentBar = () => {
return(
    <div id="navbar" className="navbar-box">
        <div className={open ? "navbar active" : "navbar"}>
        <Bounce right cascade duration={800}>
                <ul className="navlink">
                    <li><Link to="about" activeClass="active" spy={true} smooth={true} duration={700}><img src={Logo} alt="logo"/></Link></li>
                    <li><Link to="skills" activeClass="active" spy={true} smooth={true} duration={700}>Home</Link></li>

        </Bounce>
        </div>
    </div>
)}

These are the css elements for the ids:

.skillspage {
  position: absolute;
  padding:50px 0 50px 0;
  margin-top: 80px;

}
.about {
  position: absolute;
  width: 100%;
  top: 15%;
  height: 50%;
  max-width: 100%;
  margin-top: 14%;
  align-self: center;
  align-content: center;
  align-items: center;

}

Both elements are childs in the following div:

.px {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  display:flexbox;
  height: 100vh; 
  overflow: auto;
  

}

No here's the problem: If I change the overflow property in .px to 'hidden' I can only scroll with the NavigationBar, but if I change the overflow property to auto or scroll I can only scroll with my fingers.

How can I solve this problem?