Skip to content

Fix dynamic virtual scroll geometry - #21

Merged
rdlabo merged 2 commits into
mainfrom
agent/fix-dynamic-virtual-scroll
Jul 17, 2026
Merged

Fix dynamic virtual scroll geometry#21
rdlabo merged 2 commits into
mainfrom
agent/fix-dynamic-virtual-scroll

Conversation

@rdlabo

@rdlabo rdlabo commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Summary

  • replace heuristic fractional-index adjustments with exact cumulative pixel boundaries and binary searches
  • make reverse scrolling read and write symmetric native coordinates for the demo's column-reverse layout
  • retain the last complete viewport geometry while Angular data and size signals temporarily have different lengths
  • preserve the legacy calcIndex behavior and expose calculateItemCountForPixelDistance for mathematically continuous results
  • document the exact size-model contract and reverse scrolling behavior

Root cause

The strategy converted pixel distances into fractional item counts and then combined floor, ceil, and extra-item corrections. Those calculations used inconsistent coordinate origins for forward, backward, and reverse ranges, so the rendered range could only be tuned empirically.

Impact

Rendered ranges, content offsets, total content size, and scrolled indexes now derive from the same prefix-sum geometry. Normal scroll events use cached prefix sums and binary search. Reverse scrollToIndex() now converts logical positive offsets to the negative native scrollTop used by the demo's double column-reverse layout.

Validation

  • npx ng test scroll-strategies --watch=false — 14 tests passed
  • npm run lint — all projects passed
  • npm run prebuild:scroll-strategies — production package build passed
  • Chrome verification on the reverse demo: index 20 had an 886px cumulative offset, producing native scrollTop = -886 and logical scrollOffset = 886
  • git diff --check

@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for rdlabo-ionic-angular-library ready!

Name Link
🔨 Latest commit b831f71
🔍 Latest deploy log https://app.netlify.com/projects/rdlabo-ionic-angular-library/deploys/6a58e181c031c600083835c6
😎 Deploy Preview https://deploy-preview-21--rdlabo-ionic-angular-library.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@rdlabo
rdlabo marked this pull request as ready for review July 16, 2026 13:37

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 1 additional finding.

Open in Devin Review

@rdlabo
rdlabo merged commit 1f8f5b1 into main Jul 17, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant