Element appear event.
Build Status NPM Version NPM Downloads MIT License Standard Version Codecov DOI
yarn add appear-event or npm i appear-event --save
const { observe, unobserve } = require('appear-event'); const el = getElementSomehow(); const eventListenerOptions = getEventListenerOptions(); const intersectionObserverOptions = getIntersectionObserverOptions(); function onAppear(appearEvent) { // element appeared } function onDisappear(disappearEvent) { // element disappeared } observe(el, intersectionObserverOptions); // watch for appear and disappear event el.addEventListener('appear', onAppear, eventListenerOptions); el.addEventListener('disappear', onDisappear, eventListenerOptions); el.removeEventListener('appear', onAppear, eventListenerOptions); el.removeEventListener('disappear', onDisappear, eventListenerOptions); unobserve(el, intersectionObserverOptions); // unwatch for appear and disappear event
IntersectionObserver Properties
appearEvent.detail and disappearEvent.detail is an IntersectionObserveEntry
const { addAppearListener, addDisappearListener, removeAppearListener, removeDisappearListener } = require('appear-event/lib/event-listener'); const el = getElementSomehow(); const eventListenerOptions = getEventListenerOptions(); const intersectionObserverOptions = getIntersectionObserverOptions(); function onAppear(appearEvent) { // element appeared } function onDisappear(disappearEvent) { // element disappeared } addAppearListener(el, onAppear, { ...eventListenerOptions, ...intersectionObserverOptions }); addDisappearListener(el, onDisappear, { ...eventListenerOptions, ...intersectionObserverOptions }); removeAppearListener(el, onAppear, { ...eventListenerOptions, ...intersectionObserverOptions }); removeDisappearListener(el, onDisappear, { ...eventListenerOptions, ...intersectionObserverOptions });
See demo Also see jsx-native-events
Q: Does zero area elements appears when they are in the screen?
A: Yes. And if you'd like to tell if the element is a zero area element, use event.detail.boundingClientRect to get the element dimensions.
Project created by create-n.