Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
intersection-observer
Advanced tools
The intersection-observer npm package is a polyfill for the Intersection Observer API, which provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. This is particularly useful for tasks like lazy loading of images or implementing 'infinite scroll' features without relying on scroll events, thereby improving performance and resource usage.
Observing visibility of an element
This code sample demonstrates how to create an IntersectionObserver to monitor when a specific element, referred to as '.target-element', becomes visible within the viewport. When the element's visibility changes to visible, a message is logged to the console.
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is visible!');
}
});
});
observer.observe(document.querySelector('.target-element'));
Lazy loading images
This example shows how to use IntersectionObserver for lazy loading images. Images with the class 'lazy-load' only load their source URL when they're about to enter the viewport, improving page load times. The observer stops watching an image once it has loaded.
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
}, {rootMargin: '0px', threshold: 0.1});
document.querySelectorAll('img.lazy-load').forEach(img => {
observer.observe(img);
});
This package offers React components and hooks that make it easier to use the Intersection Observer API within React applications. It abstracts the API into more convenient React constructs, providing a more declarative approach compared to the vanilla intersection-observer polyfill.
A Vue.js directive that leverages the Intersection Observer API, allowing Vue developers to easily implement intersection detection within their templates. Similar to react-intersection-observer, it provides a more integrated experience within the Vue ecosystem compared to the base intersection-observer package.
⚠️ This polyfill was originally hosted in the IntersectionObserver spec repo. Refer to that repo for commit history.
IntersectionObserver
polyfillThis library polyfills the native IntersectionObserver
API in unsupporting browsers. See the API documentation for usage information.
You can install the polyfill via npm or by downloading a zip of this repository:
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 <script>
tags in the HTML:
<!-- Load the polyfill first. -->
<script src="path/to/intersection-observer.js"></script>
<!-- Load all other JavaScript. -->
<script src="app.js"></script>
Using a module loader (e.g. Browserify or Webpack):
// 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:
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:
:hover
, :active
, or :focus
states.<textarea>
elements that cause other elements to move around.If you need to handle any of these use-cases, you can configure the polyfill to poll the document by setting the POLL_INTERVAL
property. This can be set either globally or on a per-instance basis.
Enabling polling for all instances:
To enable polling for all instances, set a value for POLL_INTERVAL
on the IntersectionObserver
prototype:
IntersectionObserver.prototype.POLL_INTERVAL = 100; // Time in milliseconds.
Enabling polling for individual instances:
To enable polling on only specific instances, set a POLL_INTERVAL
value on the instance itself:
var io = new IntersectionObserver(callback);
io.POLL_INTERVAL = 100; // Time in milliseconds.
io.observe(someTargetElement);
Note: the POLL_INTERVAL
property must be set prior to calling the .observe
method, or the default configuration will be used.
Ignoring DOM changes
You can also choose to not check for intersections when the DOM changes by setting an observer's USE_MUTATION_OBSERVER
property to false
(either globally on the prototype or per-instance)
IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally
// for an instance
var io = new IntersectionObserver(callback);
io.USE_MUTATION_OBSERVER = false;
This is recommended in cases where the DOM will update frequently but you know those updates will have no effect on the position or your target elements.
Same-origin iframes are supported by the polyfill out of the box.
Additional code and configuration are required to support cross-origin iframes, both on the iframe and host sides.
The setup is as following:
_setupCrossOriginUpdater()
method. It will call the provided callback
whenever it receives the intersection data from the the parent via messaging.A hypothetical host code:
function forwardIntersectionToIframe(iframe) {
createMessagingChannel(iframe, function(port) {
var io = new IntersectionObserver(function() {
port.postMessage({
boundingClientRect: serialize(boundingClientRect),
intersectionRect: serialize(intersectionRect)
});
}, {threshold: [0, 0.1, ..., 1]});
io.observe(iframe);
});
}
Notice that the host should provide a threshold
argument for the desired
level of precision. Otherwise, the iframe side may not update as frequently as
desired.
A hypothetical iframe code:
createMessagingChannel(parent, function(port) {
if (IntersectionObserver._setupCrossOriginUpdater) {
var crossOriginUpdater = IntersectionObserver._setupCrossOriginUpdater();
port.onmessage = function(event) {
crossOriginUpdater(
deserialize(event.data.boundingClientRect),
deserialize(event.data.intersectionRect)
);
};
}
});
This polyfill does not support the proposed v2 additions, as these features are not currently possible to do with JavaScript and existing web APIs.
The polyfill has been tested and known to work in the latest version of all browsers.
Legacy support is also possible in very old browsers by including a shim for ES5 as well as the window.getComputedStyle
method. The easiest way to load the IntersectionObserver polyfill and have it work in the widest range of browsers is via polyfill.io, which will automatically include dependencies where necessary:
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
With these polyfills, IntersectionObserver
has been tested and known to work in the following browsers:
✔ |
✔ |
6+ |
✔ |
7+ |
✔ |
4.4+ |
To run the test suite for the IntersectionObserver
polyfill, open the intersection-observer-test.html
page in the browser of your choice.
If you run the tests in a browser that supports IntersectionObserver
natively, the tests will be run against the native implementation. If it doesn't, the tests will be run against the polyfill.
FAQs
A polyfill for IntersectionObserver
The npm package intersection-observer receives a total of 1,118,511 weekly downloads. As such, intersection-observer popularity was classified as popular.
We found that intersection-observer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.