How to get scroll Position in reactjs when click on button-CodePudding

As you can see it I am not able to scroll down the page when I click on the button, This all code running in one file in App.js
Even I tried with useRef() and UseState() also but not working
I need help in JavaScript logic only
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>

CodePudding user response：

enter link description hereuseRef() Not working here event I used useRef(null) also

function App() {
    const divRef = useRef();

    const myFunction = () => {
        // const element = document.getElementById("myDiv"); // working
        // element.scrollTo({ top: 100, behavior: "smooth" }); // working
        // divRef.current.scrollToView(); // working 
        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>
        </>
    );
}

CodePudding user response：

Here:

const element = document.getElementById("myDIV");

the ID is wrong. It should be myDiv because you set the div's ID to myDiv:

<div
    id="myDiv"
    style={{ height: "250px", width: "250px", overflow: "auto" }}
>

and also you can use the scroll function of Element instead of setting scrollLeft and scrollTop:

const myFunction = () => {
  const element = document.getElementById("myDiv");
  element.scroll(50, 10);
}

But I recommend using refs (I know you mentioned it but I'm not sure if you used it correctly).

Create a ref:

const divRef = useRef();

Assign the ref to the div:

<div
    id="myDiv"
    ref={divRef}
    style={{ height: "250px", width: "250px", overflow: "auto" }}
>

Then scroll it (you don't need the element variable anymore):

const myFunction = () => {
  divRef.current.scroll(50, 10);
};

CodePudding user response：

I think this is what you wanted. Since the "scroll" button dissapears after the scroll you can

import React from "react";
import "./App.css";

function App() {
function myFunction() {
// Get the scrollable element which is the parent div.
    const element = document.getElementById("myDiv");

// Calls the scroll function.
    element.scroll({
      // Top is for the y position.
      top: 100,
      //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>
    </>
  );
}

export default App;