ReactJS: How to update state while scrolling page - reactjs

Question

I have created a function to detect scroll status, means if the user has scrolled to the bottom of the page then 'console.log(true)' and setting state. The function name is handleScroll and I am calling that function from helper file. And in my view file, I'm calling event listener to detect scroll change using the handleScroll function inside componentDidMount & later removing event listener by unmounting.
However, when I run the code initially state is set inside 'atBottom: false'. But later if I scroll down the page the function is not called again and I can't detect whether I am bottom of the page or not.
----> View file
import { handleScroll } from 'components/Helper.jsx'
class ScrollStatus extends Component {
constructor(props) {
super(props);
this.state = {
height: window.innerHeight,
scrollBottomStatus: false,
}
}
componentDidMount() {
window.addEventListener("scroll", handleScroll(this,
this.stateHandler));
}
componentWillUnmount() {
window.removeEventListener("scroll", handleScroll(this,
this.stateHandler));
}
stateHandler = (state) => {
this.setState(state);
}
render() {
return ( <div> Long text ... </div> ) }
}
export default ScrollStatus
----> helper file
export const handleScroll = (obj, stateHandler) => {
const windowHeight = "innerHeight" in window ? window.innerHeight :
document.documentElement.offsetHeight;
const body = document.body;
const html = document.documentElement;
const docHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
const windowBottom = Math.round(windowHeight + window.pageYOffset);
if (windowBottom >= docHeight) {
console.log(true)
stateHandler({
scrollBottomStatus: true
});
} else {
console.log(false)
stateHandler({
scrollBottomStatus: false
});
}
}
I want the function to keeping checking window height as I scroll down or up and keep updating the state 'isBottom' while scrolling.
I would appreciate the help.

Answer 1

When I check scrolling I always add a throttle (via lodash or ...) to throttle down the actions.
What I would do in your case.
1. Add eventlistener on mount, also remove on unmount.
componentDidMount = () => {
window.addEventListener('scroll', () => _.throttle(this.handleScroll, 100));
}
2. In the same component I'd handle the state update.
handleScroll = () => {
let scrollY = window.pageYOffset;
if(scrollY < 100) { this.setState({ // BLA })
}