ネストされたスクロール接続
コンテナ間のスクロールを調整します。
「ネストされたスクロール接続」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Scrolls Inside Scrolls
Sometimes a scrollable sits inside another scrollable, like a list under a collapsing header. Nested scroll lets them cooperate instead of fighting. 📜
The Coordination Problem
Without help, the inner list eats every swipe and the outer container never moves. NestedScrollConnection shares the scroll between them.
Meet nestedScroll
Attach the nestedScroll modifier and pass a connection. That connection intercepts scroll deltas as they travel up the tree.
Modifier.nestedScroll(connection)Pre-Scroll: First Dibs
The parent gets a chance before the child via onPreScroll. Return how much of the delta you consumed; the rest flows to the child.
override fun onPreScroll(available: Offset, source): OffsetPost-Scroll: Leftovers
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.
override fun onPostScroll(consumed, available, source): OffsetConsume What You Need
In each callback you return an Offset of how much you used. Return Offset.Zero to pass everything through to the next participant.
return Offset(0f, consumedY)Fling Phases Too
There are matching onPreFling and onPostFling callbacks for momentum. They are suspend functions so you can animate as the fling resolves.
override suspend fun onPreFling(available: Velocity): VelocityRemember the Connection
Wrap your connection in remember so it survives recomposition. Capture any state it reads, like a header offset, inside it.
val connection = remember { object : NestedScrollConnection {...} }Collapsing Toolbar Classic
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.
It Just Works Often
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.
Mind the Source
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.
if (source == NestedScrollSource.Drag) { /* ... */ }Quick Check
Which callback lets a parent consume scroll before its child does?
Recap: Scrolls in Harmony
You learned NestedScrollConnection with pre and post scroll and fling, the key to collapsing toolbars and cooperating lists. 🎉
よくある質問
「ネストされたスクロール接続」レッスンは無料ですか？
はい。「ネストされたスクロール接続」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「ネストされたスクロール接続」で何を学びますか？
コンテナ間のスクロールを調整します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ネストされたスクロール接続」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。