Auto-scroll

When a drag reaches the edge of a scrollable region, auto-scroll moves the content to follow — so you can drag into parts of a list or board that are off-screen.

You'll learn

—How edge auto-scroll is driven.
—How to wrap a scrollable region with DndAutoScroll.
—Which axis and options you can tune.

How it works

The scroll velocity comes from the same DOM-free math on both adapters: the closer the pointer is to an edge, the faster the region scrolls. Only the execution differs — Flutter drives a Scrollable, Jaspr scrolls a DOM element.

Usage

Wrap the scrollable area in a DndAutoScroll inside the scope. On Flutter it drives the nearest Scrollable; on Jaspr you make the wrapper scroll with overflow styles or classes.

auto_scroll.dart

DndScope(
  child: DndAutoScroll(
    axis: DndScrollAxis.vertical,
    child: ListView(children: cards),
  ),
)

Options

•axis — DndScrollAxis.vertical (default) or horizontal.
•enabled — turn auto-scroll off without unwrapping.
•options — a DndAutoScrollOptions to tune edge thresholds and speed.

Sortable lists Reorder long lists that scroll while dragging. Multi-container sortable Auto-scroll columns on a Kanban board.

Previous ← Modifiers Next Sortable lists →