Como puede ver, no puedo desplazarme hacia abajo en la página cuando hago clic en el botón. Todo este código se ejecuta en un archivo en App.js.
Incluso probé con useRef() y UseState() también pero no funcionó
Necesito ayuda solo en la lógica de JavaScript
JavaScript:
const myFunction = () => { const element = document.getElementById("myDIV"); element.scrollLeft = 50; element.scrollTop = 10; };
HTML:
<div id="myDiv" style={{ height: "250px", width: "250px", overflow: "auto" }} > <div id="content" style={{ height: "800px", width: "2000px", backgroundColor: "coral", }} > <button onClick={myFunction}>Scroll</button> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> </div> </div>
Aquí:
const element = document.getElementById("myDIV");
la identificación es incorrecta. Debería ser myDiv
porque configuraste la ID del div en myDiv
:
<div id="myDiv" style={{ height: "250px", width: "250px", overflow: "auto" }} >
y también puede usar la función descroll
de Element
en lugar de configurar scrollLeft
y scrollTop
:
const myFunction = () => { const element = document.getElementById("myDiv"); element.scroll(50, 10); }
Pero recomiendo usar refs (sé que lo mencionaste pero no estoy seguro si lo usaste correctamente).
Crear una referencia:
const divRef = useRef();
Asigne la referencia al div:
<div id="myDiv" ref={divRef} style={{ height: "250px", width: "250px", overflow: "auto" }} >
Luego desplácese (ya no necesita la variable del elemento):
const myFunction = () => { divRef.current.scroll(50, 10); };
Esta es la referencia de código useRef () No funciona aquí evento que usé useRef (null) también
function App() { const divRef = useRef(); const myFunction = () => { divRef.current.scroll(0, 100); // Not Working, need to scroll y-100 only }; return ( <> <div id="myDiv" style={{ height: "250px", width: "250px", overflow: "auto" }} > <div id="content" ref={divRef} style={{ height: "800px", width: "2000px", backgroundColor: "coral", }} > <button onClick={myFunction}>Scroll</button> <br/> <input onClick={myFunction} type="radio" name="s" id="s" /> <label onClick={myFunction} htmlFor="">Salary Person</label> <br/> <input onClick={myFunction} type="radio" name="s" id="s" /> <label onClick={myFunction} htmlFor="">Salary Person</label> <br/> <input onClick={myFunction} type="radio" name="s" id="s" /> <label onClick={myFunction} htmlFor="">Salary Person</label> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> </div> </div> </> ); }
Creo que esto es lo que querías. Dado que el botón de "desplazamiento" desaparece después del desplazamiento, puede
import React, { useEffect, useState } from "react"; import "./App.css"; function App() { const [scrollPos, setScrollPos] = useState(0); useEffect(() => { setScrollPos(scrollPos + 100); }, []); function myFunction() { // Get the scrollable element which is the parent div. let element = document.getElementById("myDiv"); // Set this to whatever you need. Right now it will start at 100, then go to 200, 300... setScrollPos(scrollPos + 100); // Calls the scroll function. element.scroll({ // Top is for the y position. top: scrollPos, //Use left for x position. //left: 100 // It looks nicer if the scroll is smooth behavior: "smooth" }); } return ( <> <div id="myDiv" style={{ height: "250px", width: "250px", overflow: "auto" }} > <div id="content" style={{ height: "800px", width: "2000px", backgroundColor: "coral" }} > <button onClick={myFunction} //Add this is you want the button to stay in the corner. //style={{ position: "absolute" }} > Scroll </button> <br /> <input onClick={myFunction} type="radio" name="s" id="s" /> <label onClick={myFunction} htmlFor=""> Salary Person </label> <br /> <input onClick={myFunction} type="radio" name="s" id="s" /> <label onClick={myFunction} htmlFor=""> Salary Person </label> <br /> <input onClick={myFunction} type="radio" name="s" id="s" /> <label onClick={myFunction} htmlFor=""> Salary Person </label> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> <p>Some text inside a div element.</p> </div> </div> </>
); }
exportar la aplicación predeterminada;