Nested Scroll Connections

Sometimes a scrollable sits inside another scrollable, like a list under a collapsing header. Nested scroll lets them cooperate instead of fighting. 📜

Without help, the inner list eats every swipe and the outer container never moves. NestedScrollConnection shares the scroll between them.

Attach the nestedScroll modifier and pass a connection. That connection intercepts scroll deltas as they travel up the tree.

The parent gets a chance before the child via onPreScroll. Return how much of the delta you consumed; the rest flows to the child.

After the child scrolls, onPostScroll offers any unused delta back to the parent. Use it to move a header once the list hits its edge.

In each callback you return an Offset of how much you used. Return Offset.Zero to pass everything through to the next participant.

There are matching onPreFling and onPostFling callbacks for momentum. They are suspend functions so you can animate as the fling resolves.

Wrap your connection in remember so it survives recomposition. Capture any state it reads, like a header offset, inside it.

The flagship use is a collapsing toolbar: shrink the top bar with pre-scroll while the list scrolls, then expand it on the way back.

Many built-ins like Scaffold with scroll behaviors already wire nested scroll for you. Reach for a custom connection only when you need fine control.

Each callback gets a source telling you if the scroll came from a drag or a fling. Use it to react differently to touch versus momentum.

Which callback lets a parent consume scroll before its child does?

You learned NestedScrollConnection with pre and post scroll and fling, the key to collapsing toolbars and cooperating lists. 🎉