sakabako/scrollMonitor · GitHub


The scroll monitor allows you to receive events when elements enter or exit the viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element’s visibility and location relative to the viewport.

The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created.

Watchers are very cheap. Create them liberally.

This sounds almost too good to be true! Working with scroll events like these has come up fairly consistently over my last few projects, but I always had to try and strike the balance between usability and performance. Traditionally scroll events execute really fast and need throttling out of the box, but the approach implemented in scrollMonitor looks really interesting, and performant.