0
416
VistasEsta función de desplazamiento suave no funciona, a pesar de establecer el objetivo correcto
Aquí está el código para el desplazamiento suave y lo he importado correctamente de la biblioteca React, pero aún no produce ningún resultado:
const scrollToNextSection = () => { scroller.scrollTo("SecondSection", { smooth: true, duration: 1500 }); };aquí está la imagen de la sección que se llama
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Lo hice con el método DOM nativo scrollIntoView
Puede que no sea un ejemplo eficiente, pero el desplazamiento es suave como se esperaba.
Para una mejor vista, vea este enlace de sandbox de código: desplazamiento suave
- referencias usadas
const App = () => { const refOrange = React.useRef(null); const refBlue = React.useRef(null); function scrollToNode(node) { node.current.scrollIntoView({ behavior: "smooth" }); } return ( <div> <div ref={refBlue} onClick={() => scrollToNode(refOrange)} className="div1" > Click to smooth scroll to orange </div> <div ref={refOrange} onClick={() => scrollToNode(refBlue)} className="div2" > Click to smooth scroll to sky blue </div> </div> ); } ReactDOM.render(<App/>,document.querySelector('#root')) .App { font-family: sans-serif; text-align: center; } .div1 { height: 200px; background-color: aqua; margin-bottom: 30px; } .div2 { height: 200px; background-color: rgb(255, 72, 0); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta