Rewrite infinite scroll to use card-based virtual scrolling

- Measure page positions via first card's getBoundingClientRect
  (page wrappers use display:contents so have no box)
- Convert individual cards to placeholders when scrolling away
  (store HTML in jQuery data, set fixed dimensions, empty content)
- Restore cards from placeholders when scrolling back
- Calculate current page based on which page's top is closest
  to viewport bottom without being below it
- DLP (Desired Loaded Pages) = [CP-2, CP-1, CP, CP+1, CP+2]
- Load one page at a time via AJAX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-17 02:02:35 -06:00
parent 02cc7f2dfb
commit ecc182ebf9
5 changed files with 419 additions and 527 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -8,6 +8,7 @@
display: flex;
flex-direction: column;
height: 100%;
max-height: 525px;
background-color: var(--color-bg-dark);
border: 1px solid var(--color-accent);
border-radius: 0.5rem;
File diff suppressed because it is too large Load Diff
@@ -659,6 +659,13 @@
display: contents;
}
// Placeholder cards maintain grid position when content is unloaded
.property-card.is-placeholder {
background: var(--color-surface, #1a1a1a);
border: 1px solid var(--color-border, #333);
border-radius: 0.5rem;
}
// Placeholders maintain scroll height when pages unloaded
.infinite-scroll-placeholder {
grid-column: 1 / -1;