Skip to main content

fromIntersectionObserver

Types​

function fromIntersectionObserver(
  element: Element,
  options?: IntersectionObserverInit,
): IObservable<IntersectionObserverEntry>

Definition​

Creates an Observable that creates an IntersectionObserver for a specific element, and emits an IntersectionObserverEntry when a change in the intersection is detected.

Example​

Element that change of color when it intersects the body​

const element = document.createElement('div');
element.style.height = '400px';
element.style.backgroundColor = 'red';
element.style.marginTop = '150%';
document.body.appendChild(element);

const subscribe = pipe$$(fromIntersectionObserver(element, { threshold: [0, 1] }), [
  map$$$((entry: IntersectionObserverEntry): string => {
    if (entry.intersectionRatio <= 0) {
      return 'red';
    } else if (entry.intersectionRatio >= 1) {
      return 'blue';
    } else {
      return 'green';
    }
  }),
]);

subscribe((color: string) => {
  element.style.backgroundColor = color;
});