Restore Scroll Position in react js

Question

I am trying to get the scroll position of a div in React. I tried getting the window the scroll values the values are always 0.

  handleScrollPosition(e){

   sessionStorage.setItem("scrollPosition", this.myRef.current!.scrollTop.toString());
       };

  <SearchListWrapper className="TestSL" ref={this.myRef}  onScroll={this.handleScrollPosition} >
 <StyledLink onClick={ () =>{ this.onClickResult(); } } >
 </StyledLink>
</SearchListWrapper>

On click of StyledLink the new page is loaded. When I go back(with browser's back button) from the newly loaded page, I want to restore the position of scroll on SearchListWrapper .

You might want create ref const ref = useRef<HTMLDivElement>(); and to pass it to <SearchListWrapper ref={ref} and then process onScroll event accessing ref.current.scrollX and ref.current.scrollY. To do that SearchListWrapper must be defined as React.forwardRef(...) component — Art Bauer
– Art Bauer, Commented Nov 22, 2022 at 16:42
Please try to further describe what the goal is. I am not sure if you want element position relative to the page, scroll position inside of that div (inner scroll of that div), or just simple page scroll. — MalwareMoon
– MalwareMoon, Commented Nov 22, 2022 at 16:58

MalwareMoon · Accepted Answer · 2022-11-22 16:45:02Z

0

If you want scroll position of the page, what you are doing should work, but remind you, that you won't get scroll until you scroll on entire page height.

If you want to get position of the element relative to the page you can you this method: getBoundingClientRect().top. In JavaScript this is used with followingly:

document.getElementById(element).getBoundingClientRect().top;

But as you are in React you are not supposed to be refering to elements in this way. You should use useRef that you give to the element that you want the position of and then use

yourRef.current.getBoundingClientRect().top

So example of this is:

export default function App() {
  const divRef = React.useRef();
  if (divRef) {
    console.log(divRef.current.getBoundingClientRect().top);
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2> Start editing to see some magic happen!</h2>
      <div ref={divRef}>Text</div>
    </div>
  );
}

Alternative to this solution to this is here: Get scroll position with Reactjs

answered Nov 22, 2022 at 16:45

MalwareMoon

9321 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AnonymousMaith Over a year ago

divRef.current.getBoundingClientRect().top value does not change on scrolling of div

MalwareMoon Over a year ago

@MaithiliKalkar Ill repeat what I said "Please try to further describe what the goal is. I am not sure if you want element position relative to the page, scroll position inside of that div (inner scroll of that div), or just simple page scroll.". I do not have psychic powers

AnonymousMaith Over a year ago

I got the scroll position. My goal is to retain the scroll position on back button.

MalwareMoon Over a year ago

I don't think your code example shows where "back button" is. All the only information I have are the ones you have provided. Please edit your post to describe the problem and provide minimum yet complete amount of code.

AnonymousMaith Over a year ago

The back button is brower's back button. I have updated the question. Sorry but I am not exactly able to describe what is required in a question

codinn.dev · Accepted Answer · 2022-11-22 16:51:06Z

-1

Solution

handleScrollPosition(e){
    const scrollTop = document.getElementById("TestSL").scrollTop;
    //use scrollTop here
}

<SearchListWrapper id="TestSL" onScroll={this.handleScrollPosition} >

edited Nov 22, 2022 at 16:51

answered Nov 22, 2022 at 16:45

codinn.dev

2601 silver badge8 bronze badges

4 Comments

MalwareMoon Over a year ago

This is solution for JavaScript not React. +You are trying to use .getElementById on className

codinn.dev Over a year ago

added jsx also with id="TestSL"

MalwareMoon Over a year ago

But you took away the class that's there most likely for styling, still are addressing elements using document.getElementById rather than using refs.

codinn.dev Over a year ago

Ummm..agreed! Your solution looks good.

Collectives™ on Stack Overflow

Restore Scroll Position in react js

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related