How to get scrollPosition using getSnapshotBeforeUpdate() in React Js? - reactjs

Question

I am trying to get scrollPosition using getSnapshotBeforeUpdate lifecycle method. I went through below React official site to understand about new life cycle method getSnapshotBeforeUpdate
But I am not able to find any scroll position. I console.log all the output, but didn't find anything in console.
This is my code file:
import React from 'react';
class ScrollingList extends React.Component {
constructor(props){
super(props);
this.listRef = React.createRef();
}
getStaticContent() {
const result = [];
for( let i= 1; i <=100; i++){
result.push(<li key={i}>{i} > This is paragraph line-{i}</li>);
}
return result;
}
getSnapshotBeforeUpdate(preProps, preState) {
// const list = this.listRef.current;
// console.log(list);
if(preProps.list.length > this.props.list.length) {
const list = this.listRef.current;
console.log(list);
return list.ScrollingHeight - list.ScrollTop;
}
return null;
}
componentDidUpdate(preProps, preState, snapshot) {
console.log(snapshot);
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return(
<div ref={this.listRef}>
{/* <div className="content-wrap">
<ul>
{this.getStaticContent()}
</ul>
</div> */}
</div>
);
}
}
export default ScrollingList;
Error: TypeError: Cannot read property 'length' of undefined
How I can get scroll position using this life cyle method?

Answer 1

You have use OffsetHeight and scrollTop , please try this modified code.
getSnapshotBeforeUpdate(preProps, preState) {
if(preProps.list.length > this.props.list.length) {
const list = this.listRef.current;
console.log(list);
const { current } = this.listRef;
const isScrolledToBottom =
current.scrollTop + current.offsetHeight >= current.scrollHeight;
return { isScrolledToBottom };
}
return null;
}