Reputation: 360
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
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
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
Reputation: 506
Solved the problem by using lodash debounce
.
onScroll
event: <List onScroll={e => handleScroll(e)}/>
useMemo
for the endScroll
function: const handleEndScroll = useMemo(
() =>
_.debounce(() => console.log("END SCROLL"), 1000),
[]
);
const handleScroll = e => {
console.log("scroll scroll scroll");
handleEndScroll();
};
Note:
lodash
useMemo
Upvotes: 11