How to debounce scroll event in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Debouncing scroll events is crucial for preventing performance issues caused by the high frequency of scroll event firing during user scrolling. As the creator of CoreUI with over 25 years of JavaScript development experience, I’ve optimized scroll event handling in numerous interactive components and infinite scroll implementations. From my expertise, the most effective approach is creating a debounced function that delays scroll handler execution until scrolling activity stops. This technique dramatically reduces CPU usage while maintaining responsive user interactions.
Create a debounced scroll event handler that executes only after scrolling stops for a specified period.
function debounce(func, delay) {
let timeoutId
return function(...args) {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => func.apply(this, args), delay)
}
}
const handleScroll = debounce(() => {
console.log('Scroll ended at:', window.scrollY)
}, 250)
window.addEventListener('scroll', handleScroll)
Here the debounce function creates a closure that manages scroll event timing. The handleScroll function is wrapped with a 250ms delay, meaning it only executes after the user stops scrolling for 250 milliseconds. Each new scroll event clears the previous timeout and sets a new one, ensuring the handler runs only when scrolling activity ceases. This prevents hundreds of function calls during continuous scrolling.
Best Practice Note:
This is the same approach we use in CoreUI components for scroll-based features like lazy loading and scroll progress indicators. Debounced scroll events are ideal for expensive operations like DOM measurements, API calls, or complex calculations triggered by scroll position.
