Estoy tratando de implementar una función de clic para desplazarse en mi aplicación de reacción. Intenté usar la biblioteca react-scroll , window.scrollIntoView y usar window.scrollTo con una referencia. Estos no funcionaron con mi aplicación teniendo un desbordamiento, por lo que me veo obligado a eliminarla para que funcione.
.App { height: 100vh; overflow-y: scroll; // removing this makes click to scroll work } cómo usé window.scrollTo :
const scrollSection = useRef(null); const goToSection = () => { window.scrollTO({ top: scrollSection.current.offsetTop, behavior: "smooth" });y reaccionar-scroll:
<Link to="firstSection" spy={true} smooth={true}> <li></li> </Link>¿Hay alguna manera de hacer que esto funcione con desbordamiento, ya que me gustaría mantener el estilo de desbordamiento si es posible?
Llámelo en el elemento desbordado en sí, en lugar de en la ventana. HTMLElements tiene una función similar llamada scroll() .
document.querySelector("button").addEventListener("click", function(){ let target = document.getElementById("scroll"); document.querySelector("div").scroll({ top: target.offsetTop, behavior: 'smooth' }); }); html, body {margin: 0} div > p { height: 100px; } div { height: 100vh; overflow: auto; } #scroll { height: 240px; background: red; } <div> <button>Scroll</button> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p id="scroll">Scroll to me!</p> </div>