Intersection Observer comes to Firefox
▻https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox
Knowing whether or not an element is #visible has traditionally been difficult on the Web. Most solutions listen for scroll and resize events, then use #DOM #APIs like getBoundingClientRect() to manually calculate where elements are relative to the #viewport. This usually works, but it’s inefficient and doesn’t take into account other ways in which an element’s visibility can change, such as a large image finally loading higher up on the page, which pushes everything else downward.
These techniques kill performance, drain batteries, and would be completely unnecessary if the browser could just notify us whenever an element’s visibility changed.
At its most basic, the #IntersectionObserver API looks something like:
let observer = new IntersectionObserver(handler);
observer.observe(target); // <-- Element to watch
IntersectionObserver is available by default in Edge 15, Chrome 51, and Firefox 55, which is due for release next week.A polyfill is available which works effectively everywhere, albeit without the performance benefits of native implementations.
▻https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill