Reactjs Listen for scroll end events

Question

I'm working on a small application and I'm wondering how can I listen for the end of the scroll event.

I know that the following code allows me to listen for scroll events, but in my case I'm looking for a way to trigger an event once the user stops scrolling.

window.addEventListener('scroll', () => {
  (!this.state.showScrollWidget) ? this.setState({showScrollWidget: true}) : null;
})

If anyone has an idea about the best way to do it I will appreciate the help, otherwise if there is any third party library that may do the job I will also appreciate any suggestions.

Thanks.

Answer 1

I don't think there's any event to notify you that the scrolling stopped. In general, you need to wait for some time to elapse until the last scroll event. Typically you would use the debounce operation for that - many different utility libs implement it, e.g. lodash (https://lodash.com/docs/4.17.10#debounce):

window.addEventListener(
  "scroll",
  _.debounce(() => {
    console.log("scrolling stopped");
  }, 1000)
);