Element appear event.
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 eventIntersectionObserver 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.
