Why use an administrator to manage all the elements on my page?
Most implementations have one Intersection Observer for each target element or so called
sentinel. However, IntersectionObserver.observe can observer multiple
sentinels. So this library will resuse the IntersectionObserver instance for another element on the page with the same set of observer options and root element. This can dramatically improve performance for pages with lots of elements and observers.
Note: A companion library is also available for requestAnimationFrame: https://github.com/snewcomer/raf-pool
npm install intersection-observer-admin --save
- element: DOM Node to observe
- enterCallback: Function
- callback function to perform logic in your own application
- exitCallback: Function
- callback function to perform when element is leaving the viewport
- observerOptions: Object
- list of options to pass to Intersection Observer constructor (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
;const intersectionObserverAdmin = ;// Add callbacks that will be called when observer detects entering and leaving viewportintersectionObserverAdmin;intersectionObserverAdmin;// add an element to static administrator with window as scrollable areaintersectionObserverAdmin;// add an element in a scrolling containerintersectionObserverAdmin;// Use in cleanup lifecycle hooks (if applicable) from the element being observedintersectionObserverAdmin;// Use in cleanup lifecycle hooks of your application as a whole// This will remove the in memory data store holding onto all of the observersintersectionObserverAdmin;
Out of the box
|Firefox (Gecko)||55 |
|Internet Explorer||Not supported|
|Safari||Safari Technology Preview|
|Chrome for Android||59|
-  Reportedly available, it didn't trigger the events on initial load and lacks
isIntersectinguntil later versions.
-  This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference