intersect

Scroll down, when part of this trigger moves out of the viewport, the drab-intersect attribute will be removed.

<drab-intersect threshold="1" class="flex flex-col items-center gap-10">
    <div data-trigger class="card flex min-h-48 items-center justify-center">
        <p>
            Scroll down, when part of this trigger moves out of the viewport, the
            <code>drab-intersect</code>
            attribute will be removed.
        </p>
    </div>
    <div
        data-content
        class="size-48 rounded-full bg-primary transition duration-1000 data-[intersect]:bg-teal-400"
    ></div>
</drab-intersect>

Overview

Uses the Intersection Observer API to add a data-intersect attribute to content when the trigger is intersecting.

Use onIntersect and onExit to customize further with JavaScript.

threshold

Specify a threshold between 0 and 1 to determine how much of the trigger should be visible for the intersection to occur.

Constructors

new Intersect()

new Intersect(): Intersect

Properties

#exitCallbacks

private #exitCallbacks: IntersectCallback[] = []

Functions to run when the trigger exits.

Source

src/package/intersect/index.ts:23

#intersectCallbacks

private #intersectCallbacks: IntersectCallback[] = []

Functions to run when the trigger intersects.

Source

src/package/intersect/index.ts:20

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Base.#listenerController

Source

src/package/base/index.ts:17

Accessors

#threshold

get private #threshold(): number

How much of the trigger should be visible for the intersection to occur. For example, given a threshold of .5, the intersection would occur when the trigger is 50% visible.

Default

0;

Returns

number

Source

src/package/intersect/index.ts:34

event

get event(): keyof HTMLElementEventMap

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

Methods

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

Source

src/package/base/index.ts:155

destroy()

destroy(): void

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Base.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

Source

src/package/base/index.ts:167

mount()

mount(): void

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.