Demo: Building high responsive mobile web by debouncing scroll event

Scroll time: 0

This demo intended to show you how to delay the fires of your actual function in scroll event.

To see the result, please check the right bottom scroll counter while you scrolling the page.

Whenever you scroll a page the browser will need to go through a tedious process:- calculation, rendering, painting & compositing.

For instance, if you attach a scroll handler to an element, and scroll that element down say 1000px, you're likely to see 100+ events be fired.

If your event handler does a bunch of work (like heavy calculations and other DOM manipulation), you may see performance issues (jank).

To improve the scrolling performance, you have to limit down the rate of scroll event being fired.