fix(virtual-core): smooth scrolling for dynamic item sizes#1108
fix(virtual-core): smooth scrolling for dynamic item sizes#1108piecyk merged 5 commits intoTanStack:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 132ea98 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
View your CI Pipeline Execution ↗ for commit 132ea98
☁️ Nx Cloud last updated this comment at |
piecyk
force-pushed
the
fix/smooth-scrolling
branch
3 times, most recently
from
a7382bb to
006a60c
Compare
piecyk
force-pushed
the
fix/smooth-scrolling
branch
from
006a60c to
f880ca1
Compare
piecyk
force-pushed
the
fix/smooth-scrolling
branch
from
f32b62c to
e5c43d0
Compare
There was a problem hiding this comment.
Pull request overview
This PR aims to make scrollTo*({ behavior: 'smooth' }) reliable in dynamic-size virtualized lists by introducing a scroll reconciliation loop and deferring some measurements during smooth scrolling.
Changes:
- Add
scrollStatetracking + rAF-based reconciliation to keep a smooth-scroll target stable as item measurements update. - Defer
ResizeObserver-driven measurements during smooth scrolling to a buffered range around the target. - Add a new React E2E “smooth-scroll” page and Playwright coverage for smooth scrolling scenarios.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/virtual-core/src/index.ts | Adds scroll reconciliation state machine, measurement deferral during smooth scroll, and cancels pending rAF on cleanup. |
| packages/virtual-core/tests/index.test.ts | Updates test window mock to include cancelAnimationFrame for the new cleanup path. |
| packages/react-virtual/e2e/app/vite.config.ts | Registers smooth-scroll as an additional Vite build entrypoint for E2E. |
| packages/react-virtual/e2e/app/test/smooth-scroll.spec.ts | Adds Playwright tests asserting smooth scrolling reaches expected targets/alignment. |
| packages/react-virtual/e2e/app/smooth-scroll/main.tsx | New E2E app page demonstrating smooth scrolling with dynamic row heights. |
| packages/react-virtual/e2e/app/smooth-scroll/index.html | HTML entry for the new E2E smooth scroll page. |
| examples/react/dynamic/src/main.tsx | Updates the dynamic example to exercise smooth scrolling and initial “scroll to end”. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
piecyk
force-pushed
the
fix/smooth-scrolling
branch
from
e469c30 to
315c65c
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
piecyk
force-pushed
the
fix/smooth-scrolling
branch
from
06ecc66 to
ead78b2
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
🎯 Changes
This PR enables reliable smooth scrolling in dynamic lists.
Nagranie.z.ekranu.2026-01-4.o.23.10.57.mov
Limitations
This approach assumes a virtualization strategy where the list is moved as a whole (for example via a single positional offset/translate, or by using before/after spacers).
Virtualization strategies that reposition individual items during scrolling may still show visible jitter or misalignment when smooth scrolling is combined with dynamic size updates, since item measurements are intentionally deferred while smooth scrolling is in progress.
✅ Checklist
pnpm run test:pr.🚀 Release Impact