@gluonjs/core / src / createIntersectionObserver

Function: createIntersectionObserver()

createIntersectionObserver<ElementType>(options?, onEntries?): PlatformObserverHandle<ElementType, IntersectionObserverEntry>

Creates a reactive, callback-ref-owned IntersectionObserver.

Type Parameters

ElementType

ElementType extends Element = Element

Parameters

options?

IntersectionObserverInit = {}

onEntries?

(entries) => void

Returns

PlatformObserverHandle<ElementType, IntersectionObserverEntry>

Example

Raise the priority of product media as its card approaches the viewport and stop observing after the first intersection:

import {
  createIntersectionObserver,
  createMutationObserver,
  createResizeObserver,
  html,
  type PlatformObserverHandle,
} from '@gluonjs/core';

const visibility: PlatformObserverHandle<HTMLAnchorElement, IntersectionObserverEntry> =
  createIntersectionObserver({ rootMargin: '240px' }, (entries) => {
    if (entries.some((entry) => entry.isIntersecting)) visibility.stop();
  });
const size = createResizeObserver<HTMLAnchorElement>({ box: 'border-box' });
const changes = createMutationObserver<HTMLAnchorElement>({ attributes: true });

const card = html`<a ...=${{ ref: visibility.ref }} href="/products/orbit-lamp">Orbit Lamp</a>`;
console.log(card, size.entries.value, changes.supported.value);