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.

maybe a interval function should help, which would check last position of scroll and current position of scroll, if they are same, then it means user is not scrolling. What library are you planning to use though? — user1735921
– user1735921, Commented May 2, 2018 at 9:27
yeah I know that I can do that through an interval function but I was wondering if there is any better solution, concerning the library i'm waiting for some suggestions. — BenFarhat Souhaib
– BenFarhat Souhaib, Commented May 2, 2018 at 9:32
Nope. Just use a setTimeout(). There's no point in using another library for something so trivial (if one even exists - which I doubt). — Rory McCrossan
– Rory McCrossan, Commented May 2, 2018 at 9:34

diedu · Accepted Answer · 2022-10-26 22:48:51Z

12

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

edited Oct 26, 2022 at 22:48

diedu

20.9k4 gold badges40 silver badges53 bronze badges

answered May 2, 2018 at 10:04

Vladimir Rovensky

4,7041 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ido Bar Lev · Accepted Answer · 2021-11-19 01:55:06Z

11

Solved the problem by using lodash debounce.

Attach onScroll event:

 <List onScroll={e => handleScroll(e)}/>

useMemo for the endScroll function:

 const handleEndScroll = useMemo(
    () =>
      _.debounce(() => console.log("END SCROLL"), 1000),
    []
  );

Handle scroll and endScroll:

 const handleScroll = e => {
    console.log("scroll scroll scroll");
    handleEndScroll();
  };

Note:

install and import lodash
import useMemo

answered Nov 19, 2021 at 1:55

Ido Bar Lev

4965 silver badges8 bronze badges

Comments

Gene S · Accepted Answer · 2023-05-11 20:07:19Z

5

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

answered May 11, 2023 at 20:07

Gene S

5736 silver badges17 bronze badges

2 Comments

James Pearce Over a year ago

caniuse.com/?search=scrollend

Anomaly Over a year ago

Not supported in Safari or Safari for iOS as of March 2024

Collectives™ on Stack Overflow

Reactjs Listen for scroll end events

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related