-
- {items.map(({index, key, row}) => (
-
- {row ? row.title : 'Loading...'}
-
- ))}
-
+
+ {items.map(({index, key, row}) => (
+
+ {row ? row.title : 'Loading...'}
+
+ ))}
+
-
+ {/* The rows element doubles as the content wrapper: its padding stands
+ in for the unloaded rows above and below (it isn't the scroll
+ container — the window is — so padding on it is safe). */}
+
{items.map(item => (
))}
-
{
// The same row must be back in the viewport — `toBeInViewport` (not just
// `toBeVisible`) catches the regression where the anchor is restored but the
- // scroll offset is not, leaving the viewport parked on the blank top spacer.
+ // scroll offset is not, leaving the viewport parked on the blank top padding.
await expect(page.locator(`a[href="${topRowHref}"]`)).toBeInViewport({
timeout: TIMEOUT,
});
diff --git a/demo/react/e2e/tests/stick.spec.ts b/demo/react/e2e/tests/stick.spec.ts
new file mode 100644
index 0000000..31bbed1
--- /dev/null
+++ b/demo/react/e2e/tests/stick.spec.ts
@@ -0,0 +1,81 @@
+import {expect, test, type Page} from '@playwright/test';
+import {viewportHandle, waitForRows} from './helpers.ts';
+
+const TIMEOUT = 20_000;
+
+// Distance (px) from the bottom edge; 0-ish when pinned.
+function bottomGap(page: Page): Promise {
+ return page.evaluate(() => {
+ const vp = document.querySelector('[class*="viewport"]')!;
+ return vp.scrollHeight - vp.scrollTop - vp.clientHeight;
+ });
+}
+
+// Grow the rows' content wrapper by `px`, standing in for content growth the
+// virtualizer doesn't announce (e.g. the last row streaming in taller). The
+// stick-to-bottom ResizeObserver on the wrapper must pick it up on its own.
+function growContent(page: Page, px: number): Promise {
+ return page.evaluate(px => {
+ const wrapper = document.querySelector('[data-vrow-index]')!
+ .parentElement as HTMLElement;
+ const current = parseFloat(getComputedStyle(wrapper).paddingBottom) || 0;
+ wrapper.style.paddingBottom = `${current + px}px`;
+ }, px);
+}
+
+test.describe('Stick to bottom', () => {
+ test('follows growth at the bottom only while parked there', async ({
+ page,
+ }) => {
+ // Exact count for a stable scrollbar, so the jump to the bottom lands at
+ // the true end instead of chasing a growing estimate.
+ await page.goto('/?follow=bottom&count=200');
+ await waitForRows(page, TIMEOUT);
+
+ // Park at the bottom and wait for paging to settle there: the scrollable
+ // extent stops changing (the last page loaded, the bottom space
+ // collapsed) across consecutive polls.
+ const vp = await viewportHandle(page);
+ let prevHeight = -1;
+ await expect(async () => {
+ const height = await vp.evaluate(el => {
+ el.scrollTop = el.scrollHeight;
+ return el.scrollHeight;
+ });
+ const stable = height === prevHeight;
+ prevHeight = height;
+ expect(stable).toBe(true);
+ expect(await bottomGap(page)).toBeLessThanOrEqual(1);
+ }).toPass({timeout: TIMEOUT, intervals: [100, 150, 200]});
+
+ // Content grows at the bottom → the viewport must follow, purely via the
+ // wrapper ResizeObserver (no virtualizer content tick involved).
+ await growContent(page, 200);
+ await expect(async () => {
+ expect(await bottomGap(page)).toBeLessThanOrEqual(1);
+ }).toPass({timeout: TIMEOUT});
+
+ // Scroll away → unstuck: further growth must not yank the viewport.
+ const before = await vp.evaluate(el => (el.scrollTop -= 400));
+ await growContent(page, 200);
+ // Give a re-pin (if any, wrongly) time to land.
+ await page.waitForTimeout(250);
+ const after = await vp.evaluate(el => el.scrollTop);
+ expect(Math.abs(after - before)).toBeLessThanOrEqual(1);
+
+ // Scroll back to the bottom → re-arms and follows again. Let the scroll
+ // event's stuckness measure land (it reads live geometry, so growing in
+ // the same frame would read as "not at the bottom") before growing.
+ await vp.evaluate(el => {
+ el.scrollTop = el.scrollHeight;
+ });
+ await expect(async () => {
+ expect(await bottomGap(page)).toBeLessThanOrEqual(1);
+ }).toPass({timeout: TIMEOUT});
+ await page.waitForTimeout(100);
+ await growContent(page, 200);
+ await expect(async () => {
+ expect(await bottomGap(page)).toBeLessThanOrEqual(1);
+ }).toPass({timeout: TIMEOUT});
+ });
+});
diff --git a/demo/react/list-shared.ts b/demo/react/list-shared.ts
index c2e36db..65032a9 100644
--- a/demo/react/list-shared.ts
+++ b/demo/react/list-shared.ts
@@ -93,8 +93,9 @@ export function useGetPageQuery(listContextParams: ListContextParams) {
/**
* A single representative row-height estimate per mode, used only to size the
- * spacers that stand in for not-yet-loaded rows (the scrollbar is approximate,
- * as with any virtualized list). Real heights come from the DOM.
+ * content-wrapper padding that stands in for not-yet-loaded rows (the
+ * scrollbar is approximate, as with any virtualized list). Real heights come
+ * from the DOM.
*/
export function useEstimateSize(heightMode: HeightMode): () => number {
return useCallback(
@@ -116,8 +117,8 @@ export function useDemoControls() {
const [anchoringStr, setAnchoring] = useUrlState('anchoring', 'manual');
const anchoring = anchoringStr as AnchoringMode;
const [countStr] = useUrlState('count', '');
- // Guard against non-numeric ?count= — NaN would flow into the spacer math
- // (NaN heights) with no error.
+ // Guard against non-numeric ?count= — NaN would flow into the space
+ // estimates (NaN padding) with no error.
const parsedCount = Number(countStr);
const count =
countStr && Number.isFinite(parsedCount) ? parsedCount : undefined;
diff --git a/demo/shared/App.module.css b/demo/shared/App.module.css
index beed5c4..e946cb3 100644
--- a/demo/shared/App.module.css
+++ b/demo/shared/App.module.css
@@ -62,14 +62,6 @@
(none in manual mode, auto in native mode) — don't set it here. */
}
-/* Spacers stand in for the estimated unloaded rows above/below the window.
- They must NOT be scroll-anchor candidates — the browser should anchor to a
- real row, not a resizing spacer. */
-.spacer {
- overflow-anchor: none;
- width: 100%;
-}
-
/* Rows. The base is the design's two-column row (title + description left,
date right); per height-mode variants below adjust the vertical rhythm so
the demo's uniform / fixed / dynamic sizing keeps exercising the engine. */
diff --git a/demo/solid/App.tsx b/demo/solid/App.tsx
index a3b607d..d5f0adc 100644
--- a/demo/solid/App.tsx
+++ b/demo/solid/App.tsx
@@ -7,7 +7,7 @@ import {For, Show, createMemo} from 'solid-js';
import styles from '../shared/App.module.css';
import {DevPanel} from './DevPanel.tsx';
import {ItemDetail} from './ItemDetail.tsx';
-import {ItemRow, Spacer} from './ItemRow.tsx';
+import {ItemRow} from './ItemRow.tsx';
import {ListHeader} from './ListHeader.tsx';
import {
createDemoControls,
@@ -85,22 +85,30 @@ export function App() {
onToggleSortDirection={toggleSortDirection}
/>
-
- {/* Plain
is safe here: the binding exposes items as a store
- reconciled by row key, so a row's VirtualRow instance — and with
- it the DOM node scroll anchoring measures against — survives
- paging. */}
-
- {item => (
-
- )}
-
-
+ {/* Content wrapper: its padding stands in for the unloaded rows
+ above and below (padding, not margin, so it always contributes
+ to the scrollable extent). */}
+
+ {/* Plain is safe here: the binding exposes items as a store
+ reconciled by row key, so a row's VirtualRow instance — and
+ with it the DOM node scroll anchoring measures against —
+ survives paging. */}
+
+ {item => (
+
+ )}
+
+