How to get scroll Position in reactjs when click on button

Question

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>

score 1 · Accepted Answer · answered Jul 16 '22 at 16:56

1

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);
};

answered Jul 16 '22 at 16:56

User456

1,216
4
15

Thanks for the Solution, but here useRef() getting undefine, will you please help me in that – Amit Sharma Jul 16 '22 at 17:21
@Amit Is there an error? – User456 Jul 16 '22 at 17:31
I am not getting any error there I am getting undefined value when I look in console log, in comment below I update all my code – Amit Sharma Jul 16 '22 at 17:54
1

@Amit Ok. I saw your code in codesandbox. You passed `divRef` to the wrong div. Instead pass it to the div that has the `myDiv` ID. – User456 Jul 17 '22 at 10:10
https://codesandbox.io/s/exciting-rgb-hn798p?file=/src/App.js:287-293 ---- ok now I got it working now, and do you know if I remove height and weight size from ref={myDiv} then it is not working, in that case how we handle scroll?? except window.scroll , scrollTo, scrollTop – Amit Sharma Jul 17 '22 at 13:43
What do you mean by "handle"? – User456 Jul 17 '22 at 15:03
I got my solution. The Issue in CSS, I need to see both both logic together in react and CSS. thanks for the help. – Amit Sharma Jul 18 '22 at 09:17
[Link 1](https://stackoverflow.com/questions/50228747/reactjs-window-scrollto-not-working-on-secondary-scroll-bar) [Link2](https://stackoverflow.com/questions/1174863/javascript-scrollto-method-does-nothing/18573599#18573599) [Link3](https://stackoverflow.com/questions/70859550/react-window-scroll-to-bottom) – Amit Sharma Jul 18 '22 at 15:59

Maxim Vladimirovich · Answer 2 · 2022-07-18T14:43:34.423

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

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>
</>

); }

export default App;

with the help of element its working fine but I need solution in useRef() or UseState() now how will scroll screen with useRef or useState — Amit Sharma, Jul 17 '22 at 03:25

How to get scroll Position in reactjs when click on button

2 Answers2