This is a great idea and I love that it is self contained.
However, I don't see a lot of benefit in the way you're using requestAnimationFrame. JavaScript is single threaded, so if your callback is a long-running function then the onscroll handler won't fire until the callback is done.
Instead of using requestAnimationFrame to delay both the checking and handler callbacks (which means callbacks don't know about the scrolling until 33ms after it happens) you'd probably be better off using it to just throttle the global onscroll handler.
You might also want to take a looks at mobile scroll events. Chrome is relatively sane but iOS Safari and the native Android browser do weird things like only firing a scroll event after the page has stopped moving.
> However, I don't see a lot of benefit in the way you're using requestAnimationFrame. JavaScript is single threaded, so if your callback is a long-running function then the onscroll handler won't fire until the callback is done.
When a normal onscroll handler runs, doesn't it block the browser from processing the scroll event until the handler is finished? I assume this is to keep that from happening.
Yeah, but let's say scroll events happen every 10ms and the callback takes 50ms to complete. The first scroll event will be relatively fast, because it's just doing scheduling.
But when the callback kicks in, the scroll events that happen in the 50ms it takes will be buffered. The browser can't pause the callback to run the event handler.
However, I don't see a lot of benefit in the way you're using requestAnimationFrame. JavaScript is single threaded, so if your callback is a long-running function then the onscroll handler won't fire until the callback is done.
Instead of using requestAnimationFrame to delay both the checking and handler callbacks (which means callbacks don't know about the scrolling until 33ms after it happens) you'd probably be better off using it to just throttle the global onscroll handler.
You might also want to take a looks at mobile scroll events. Chrome is relatively sane but iOS Safari and the native Android browser do weird things like only firing a scroll event after the page has stopped moving.