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;