CODEWITHSUNDEEP
javascriptjqueryreactjsscroll
BenFarhat Souhaib
BenFarhat Souhaib

Reputation: 360

Reactjs Listen for scroll end events

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.

Upvotes: 11

Views: 15687

Answers (3)

Gene S
Gene S

Reputation: 553

The scrollend event was added to FF in 109. Blink/Webkit browsers are expected to get it in mid- to late 2023.

Upvotes: 4

Vladimir Rovensky
Vladimir Rovensky

Reputation: 4704

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

Upvotes: 12

Ido Bar Lev
Ido Bar Lev

Reputation: 506

Solved the problem by using lodash debounce.

  1. Attach onScroll event:
 <List onScroll={e => handleScroll(e)}/>
  1. useMemo for the endScroll function:
 const handleEndScroll = useMemo(
    () =>
      _.debounce(() => console.log("END SCROLL"), 1000),
    []
  );
  1. Handle scroll and endScroll:
 const handleScroll = e => {
    console.log("scroll scroll scroll");
    handleEndScroll();
  };

Note:

  • install and import lodash
  • import useMemo

Upvotes: 11

Related Questions