Estoy creando un sitio web con reaccionar y estoy usando una barra de navegación. Implementé react-scroll y con Link pude desplazarme a cada elemento de identificación de css. Pero también quiero desplazarme (con los dedos) por el sitio web.

Esta es mi barra de navegación:

 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> )}

Estos son los elementos css para los 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; }

Ambos elementos son hijos en el siguiente div:

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

No, aquí está el problema: si cambio la propiedad de desbordamiento en .px a ' oculto ', solo puedo desplazarme con la barra de navegación, pero si cambio la propiedad de desbordamiento a automático o desplazamiento , solo puedo desplazarme con los dedos.

¿Como puedó resolver esté problema?