-1

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 .

AnonymousMaith
  • 1
  • 2
  • 1
    You might want create ref `const ref = useRef();` and to pass it to ` – Art Bauer Nov 22 '22 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 Nov 22 '22 at 16:58

2 Answers2

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

MalwareMoon
  • 788
  • 1
  • 2
  • 13
  • divRef.current.getBoundingClientRect().top value does not change on scrolling of div – AnonymousMaith Nov 22 '22 at 17:21
  • @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 – MalwareMoon Nov 23 '22 at 14:58
  • I got the scroll position. My goal is to retain the scroll position on back button. – AnonymousMaith Nov 23 '22 at 19:04
  • 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. – MalwareMoon Nov 23 '22 at 19:34
  • 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 – AnonymousMaith Nov 23 '22 at 21:54
-1

Solution

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

<SearchListWrapper id="TestSL" onScroll={this.handleScrollPosition} >
codinn.dev
  • 263
  • 1
  • 8