title: Not getting callback after adding an event listener for scroll event in React.js
body: <p>I followed the instruction from this post
  <a href="https://stackoverflow.com/questions/29725828/update-style-of-a-component-onscroll-in-react-js">Update style of a component onScroll in React.js</a> to register event listener for scroll event.</p>
  
  <p>I have a React component that renders a Table component from the React-Bootstrap library <a href="https://react-bootstrap.github.io/" rel="noreferrer" title="React-Bootstrap">https://react-bootstrap.github.io/</a></p>
  
  <p>I think I registered the event listener correctly but I am not sure why when I scroll down the table, my handleScroll() callback is not getting invoked.  Is it because the event listener is not registered on the actual table itself?</p>
  
  <p>Thanks for taking your time reading my question.  Any feedback is appreciated.</p>
  
  <p>Here's a snippet of how I register for the event listener.</p>
  
  <pre><code>  handleScroll: function(event) {
      console.log('handleScroll invoked');
    },
  
    componentDidMount: function() {
      console.log('componentDidMount invoked');
      window.addEventListener('scroll', this.handleScroll);
    },
  
    componentWillUnmount: function() {
      console.log('componentWillUnmount invoked');
      window.removeEventListener('scroll', this.handleScroll);
    },
  </code></pre>
  
  <p>Here's a snippet of my render function.</p>
  
  <pre><code>  render: function() {
  
      var tableRows = this.renderTableRow(this.props.sheet);
  
      return (
        &lt;Table striped bordered condensed hover&gt;
          &lt;TableHeaderContainer
            tableTemplateName={this.props.tableTemplateName}
            sheetName={this.props.sheet.name}/&gt;
          &lt;tbody&gt;
            {tableRows}
          &lt;/tbody&gt;
        &lt;/Table&gt;
      );
    }
  </code></pre>