Actions

Intersect

Description

The Intersect action observes the intersection of an element and emits intersect events.

Usage

<script lang="ts">
    import { intersect, type IntersectParameters } from 'action-archive';

    const intersectParameters: IntersectParameters = {
        root: document.documentElement,
        rootMargin: "0px 0px 0px 0px",
        thresholds: [0]
    };
</script>

<div 
    use:intersect={intersectParameters} 
    on:aa_intersect={...} 
    on:aa_enter={...} 
    on:aa_leave={...} 
/>

Example

Intersecting: false

API

Parameters

Name	Type	Default	Description
root	Element \| Document \| null	document.documentElement	Element whose bounds are treated as the bounding box for the targeted element.
rootMargin	string	"0px 0px 0px 0px"	Margin that is added to the root's bounding box, accepts CSS margin values.
threshold	number \| number[]	[0]	Threshold(s) that define when the intersect event should be emitted.
disabled	boolean	false	Disables the action.

Events

Name	Type	Description
aa_intersect	(event: CustomEvent<{ entry: IntersectionObserverEntry }>) => void	Emitted when the element intersects with the root.
aa_enter	(event: CustomEvent<{ entry: IntersectionObserverEntry }>) => void	Emitted when the element enters the root.
aa_leave	(event: CustomEvent<{ entry: IntersectionObserverEntry }>) => void	Emitted when the element leaves the root.

Focus Trap Long Press