Not getting callback after adding an event listener for scroll event in React.js

user_287281 0
Viewed 33046

I followed the instruction from this post Update style of a component onScroll in React.js to register event listener for scroll event.

I have a React component that renders a Table component from the React-Bootstrap library https://react-bootstrap.github.io/

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?

Thanks for taking your time reading my question. Any feedback is appreciated.

Here's a snippet of how I register for the event listener.

  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);
  },

Here's a snippet of my render function.

  render: function() {

    var tableRows = this.renderTableRow(this.props.sheet);

    return (
      <Table striped bordered condensed hover>
        <TableHeaderContainer
          tableTemplateName={this.props.tableTemplateName}
          sheetName={this.props.sheet.name}/>
        <tbody>
          {tableRows}
        </tbody>
      </Table>
    );
  }
react-bootstrap reactjs
5 Answers

For me the only thing that worked was adding true to the third argument in the EventListener:


componentDidMount() {
  window.addEventListener('scroll', this.handleScroll, true);
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleScroll, true);
}

Source: https://github.com/facebook/react/issues/5042#issuecomment-145317519

user_24540590

When using hooks you can implement it like this. Please note that it's important to remove the event listener when the component is no longer mounted.

The return statement in useEffect hook will execute when the component unmounts.

const handleScroll = () => {
  console.log('Scrolling...');
};

useEffect(() => {
  window.addEventListener('scroll', handleScroll, true);

  // Remove the event listener
  return () => {
    window.removeEventListener('scroll', handleScroll, true);
  };
}, []);
user_19677080

Thank you dannyjolie - this work 

elementScrollData = (value) => {
  console.log('elementScrollData ', value);
} 
return (
      <div className="css-scroll-class" onScroll={elementScrollData}>
          Scroll element
      </div>
       );
}
user_76897720

I was having the same issue in Next.js App. One of the issues was that I had placed on the root container an overflowX:hidden property. After removing that and placing the below code in the root component, everything worked well.

Check where you are placing this hook and see if there are any overflow properties and remove them. Thanks.

  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const scrollTotal =
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight;
      if (document.documentElement.scrollTop / scrollTotal > 0.8) {
        setShow(true);
      } else {
        setShow(false);
      }
    };
    document.addEventListener("scroll", onScroll, true);
    return () => document.removeEventListener("scroll", onScroll, true);
  }, []);
user_120493530
Related