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:
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -8,6 +8,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
max-height: 525px;
|
||||||
background-color: var(--color-bg-dark);
|
background-color: var(--color-bg-dark);
|
||||||
border: 1px solid var(--color-accent);
|
border: 1px solid var(--color-accent);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -659,6 +659,13 @@
|
|||||||
display: contents;
|
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
|
// Placeholders maintain scroll height when pages unloaded
|
||||||
.infinite-scroll-placeholder {
|
.infinite-scroll-placeholder {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
|
|||||||
Reference in New Issue
Block a user