AutoScroll

Auto-scroll for a Reorder group, as Motion's: while an item is dragged near a scroller's edge, the scroller scrolls toward it, faster the nearer. This is its math, one update on one axis at a time; the binding measures the scroller, calls step at each move of the drag, and scrolls by what it says.

import * as AutoScroll from "@wardic/core/AutoScroll"

let state = Option.none<AutoScroll.State>()
// At each move of the drag:
const next = AutoScroll.step(state, {
  pointer: point.y,
  start: visible.top,
  end: visible.bottom,
  velocity: velocity.y,
  scroll: offset,
  maxScroll: () => range,
})
scrollBy(next.amount)
state = next.state

Interfaces

State

The edge a scroller is scrolling toward, between one step and the next.

Properties

edge

readonly edge: "start" | "end";

The edge: "start" at the top or left, "end" at the bottom or right.

limit

readonly limit: number;

The scroll range when it started toward that edge: it never scrolls past it, so content that grows while it scrolls doesn't keep it scrolling.

Variables

MAX_SPEED

const MAX_SPEED: 25 = 25;

The most a scroller scrolls in one update, in px, with the pointer at its edge: 25, as Motion's.

THRESHOLD

const THRESHOLD: 50 = 50;

How near a scroller's visible edge, in px, the pointer starts it scrolling: 50, as Motion's.

Functions

axis()

function axis(axis, velocity): "x" | "y";

The axis Auto-scroll follows: a one-axis group's own, and in a grid the one the pointer moves faster on, y on a tie, as Motion's.

Parameters

axis

Axis

velocity

Point

Returns

"x" | "y"

step()

function step(state, input): object;

One update on one axis: how far to scroll, negative toward the start, and the state for the next. pointer, start and end are in the viewport's px: the pointer, and the scroller's visible edges, held within the viewport. Within THRESHOLD of an edge it scrolls MAX_SPEED × (1 − distance ÷ THRESHOLD)² toward it.

It starts only while the pointer moves toward that edge (velocity), and reads maxScroll() then, the only time it's read.
It keeps on while the pointer stays near the edge, and stops at the end at the range it read. scroll is how far the scroller is scrolled.
Away from both edges there's no state.

readonly amount: number;

state

readonly state: Option<State>;