Socket
Socket
Sign inDemoInstall

intersection-observer-admin

Package Overview
Dependencies
0
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

intersection-observer-admin

Intersection Observer Admin for better performance


Version published
Maintainers
1
Weekly downloads
37,268
decreased by-23.66%

Weekly downloads

Readme

Source

intersection-observer-admin

Download count all time npm version

Why use an administrator to manage all the elements on my page?

This library is used in ember-in-viewport and ember-infinity. This library is particularly important for re-using the IntersectionObserver API.

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

Installation

npm install intersection-observer-admin --save

Usage

API

  1. element: DOM Node to observe
  2. enterCallback: Function
    • callback function to perform logic in your own application
  3. exitCallback: Function
    • callback function to perform when element is leaving the viewport
  4. observerOptions: Object
import IntersectionObserverAdmin from 'intersection-observer-admin';

const intersectionObserverAdmin = new IntersectionObserverAdmin();

// Add callbacks that will be called when observer detects entering and leaving viewport
intersectionObserverAdmin.addEnterCallback(element, enterCallback);
intersectionObserverAdmin.addExitCallback(element, exitCallback);

// add an element to static administrator with window as scrollable area
intersectionObserverAdmin.observe(element, { root, rootMargin: '0px 0px 100px 0px', threshold: 0 });

// add an element in a scrolling container
intersectionObserverAdmin.observe(element, { root, rootMargin: '0px 0px 100px 0px', threshold: 0 });

// Use in cleanup lifecycle hooks (if applicable) from the element being observed
intersectionObserverAdmin.unobserve(element, observerOptions);

// Use in cleanup lifecycle hooks of your application as a whole
// This will remove the in memory data store holding onto all of the observers
intersectionObserverAdmin.destroy();

IntersectionObserver's Browser Support

Out of the box

Chrome51 [1]
Firefox (Gecko)55 [2]
MS Edge15
Internet ExplorerNot supported
Opera [1]38
Safari12.1
Chrome for Android59
Android Browser56
Opera Mobile37
  • [1] Reportedly available, it didn't trigger the events on initial load and lacks isIntersecting until later versions.
  • [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference dom.IntersectionObserver.enabled.

Keywords

FAQs

Last updated on 22 Oct 2022

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc