A polyfill for IntersectionObserver with SSR checking
npm install ssr-intersection-observerIntersectionObserver polyfillThis library polyfills the native IntersectionObserver API in unsupporting browsers. See the API documentation for usage information.
- Installation
- Configuring the polyfill
- Browser support
- Running the tests
You can install the polyfill via npm or by downloading a zip of this repository:
``sh`
npm install intersection-observer
The examples below show various ways to add the IntersectionObserver polyfill to your site. Be sure to include the polyfill prior to referencing it anywhere in your JavaScript code.
Using
`
Using a module loader (e.g. Browserify or Webpack):
`js
// Require the polyfill before requiring any other modules.
require('intersection-observer');
require('./foo.js');
require('./bar.js');
`
It's impossible to handle all possible ways a target element could intersect with a root element without resorting to constantly polling the document for intersection changes.
To avoid this extra work and performance penalty, the default configuration of the polyfill optimizes for the most common IntersectionObserver use cases, which primarily include target elements intersecting with a root element due to:
- User scrolling.
- Resizing the window.
- Changes to the DOM.
All of the above can be handled without polling the DOM.
There are, however, additional use cases that the default configuration will not detect. These include target elements intersecting with a root element due to:
- CSS changes on :hover, :active, or :focus states.
- CSS changes due to transitions or animations with a long initial delay.
- Resizable