title: ReactJS: How to update state while scrolling page
body: <p>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 &amp; later removing event listener by unmounting.</p>
  
  <p>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.</p>
  
  <pre><code>----&gt; 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) =&gt; {
      this.setState(state);
    }
    render() {
      return ( &lt;div&gt; Long text ... &lt;/div&gt; ) }
  }
  export default ScrollStatus
  
  
  ----&gt; helper file
  export const handleScroll = (obj, stateHandler) =&gt; {
    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 &gt;= docHeight) {
      console.log(true)
      stateHandler({
        scrollBottomStatus: true
      });
    } else {
      console.log(false)
      stateHandler({
        scrollBottomStatus: false
      });
    }
  }
  </code></pre>
  
  <p>I want the function to keeping checking window height as I scroll down or up and keep updating the state 'isBottom' while scrolling.</p>
  
  <p>I would appreciate the help.</p>