ScrollOffset

Scroll offsets, the DOM's: Motion's syntax for where a target's progress through its scroll container runs, from 0 to 1, which the DOM's Probe.scroll resolves. Core takes an offset as its Environment's own and passes it through, so its syntax, its names and its units are the DOM's.

• An edge is a name (start, center, end), a fraction of a length (0.5), or a CSS length: "100px" a distance, "50%" a fraction, "10vw" or "10vh" a share of the viewport.
• A stop is a pair of edges, [target, container]: the scroll position where the target's edge meets the container's. A string holds both ("start end"); one edge alone is both for a name or a number ("end", 0.5), else the target's against the container's start ("100px").
• An offset is two stops or more: progress runs from 0 at the first to 1 at the last, evenly between them, and holds past them.

import * as ScrollOffset from "@wardic/dom/ScrollOffset"

// From the target's top meeting the container's bottom, to its bottom meeting the container's top:
const across: ScrollOffset.ScrollOffset = ["start end", "end start"]

Type Aliases

Edge

type Edge = string | number;

One edge of a stop: a name, a fraction, or a CSS length (see the module's doc).

ScrollOffset

type ScrollOffset = ReadonlyArray<Stop>;

Where a target's progress runs: two stops or more.

Stop

type Stop = Edge | readonly [Edge, Edge];

One stop: [target edge, container edge], a string of both, or one edge.

Variables

All

const All: ScrollOffset;

While all of the target is in the container: the offset with a target and none given.

Any

const Any: ScrollOffset;

While any of the target is in the container.

Enter

const Enter: ScrollOffset;

Motion's presets: while the target comes into the container.

Exit

const Exit: ScrollOffset;

While the target leaves the container.