anchorTo: 'end' does not keep the reading position when only paddingStart changes

Offen
  • Stimmt etwas nicht?
#1,366 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@duongynhi000001-crypto arbeitet bereits daran.

Seit 05.11.2026.

  • #1370 von @duongynhi000001-crypto — offen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
30/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Veraltet
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

The issue points to packages/virtual-core/src/index and provides a reproduction to save as packages/virtual-core/tests/padding-anchor.test.ts. Read the existing prepend anchor path and run the reproduction in packages/virtual-core; verify that both padding changes preserve the item’s viewport position and the provided control still passes. An open linked pull request (#1370) already addresses this issue.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Describe the bug

With anchorTo: 'end', a prepend keeps the item at the scroll offset in place. A change of paddingStart with the same count and keys does not: setOptions captures an anchor only when the count or the first/last keys change, so every item moves by the padding delta and nothing compensates. (scrollMargin behaves the same way.)

This matters when content above the items lives in the padding, for example a chat's "Load earlier messages" header whose height changes with its state (loading, an error with a Retry button that wraps, translated text). Keeping that header out of the items is what makes a prepend anchor on the first message rather than on the header, so the padding is the natural place for it. Today the header's own height changes then move the reader's messages.

Your minimal, reproducible example

Dropping this in packages/virtual-core/tests/ reproduces it on main (11b48e4). The control passes; the other two fail with scrollToFn called 0 times.

import { expect, test, vi } from 'vitest'
import { Virtualizer } from '../src/index'

// 20 items of 100px, a 300px viewport, anchorTo: 'end'. Content above the
// items (a "Load earlier messages" header) lives in paddingStart.
function create(paddingStart: number, offset: number) {
  let keys = Array.from({ length: 20 }, (_, i) => `m${i}`)
  let padding = paddingStart
  const scrollToFn = vi.fn()
  const scrollElement = {
    scrollTop: offset,
    scrollLeft: 0,
    scrollHeight: padding + keys.length * 100,
    scrollWidth: 1000,
    clientHeight: 300,
    clientWidth: 400,
    offsetHeight: 300,
    ownerDocument: {
      defaultView: {
        requestAnimationFrame: () => 1,
        cancelAnimationFrame: vi.fn(),
        performance: { now: () => Date.now() },
        ResizeObserver: vi.fn(function () {
          return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() }
        }),
      },
    },
  } as unknown as HTMLDivElement
  const options = () => {
    const snapshot = keys
    return {
      count: snapshot.length,
      estimateSize: () => 100,
      getItemKey: (index: number) => snapshot[index]!,
      getScrollElement: () => scrollElement,
      scrollToFn,
      observeElementRect: (_: any, cb: (rect: { width: number; height: number }) => void) => {
        cb({ width: 400, height: 300 })
        return () => {}
      },
      observeElementOffset: (_: any, cb: (offset: number, isScrolling: boolean) => void) => {
        cb(scrollElement.scrollTop, false)
        return () => {}
      },
      anchorTo: 'end' as const,
      paddingStart: padding,
    }
  }
  const virtualizer = new Virtualizer(options())
  virtualizer._willUpdate()
  virtualizer['getMeasurements']()
  scrollToFn.mockClear()
  const update = () => {
    virtualizer.setOptions(options())
    ;(scrollElement as any).scrollHeight = padding + keys.length * 100
    virtualizer._willUpdate()
  }
  return {
    scrollToFn,
    prepend(count: number) {
      keys = [...Array.from({ length: count }, (_, i) => `p${i}`), ...keys]
      update()
    },
    setPaddingStart(next: number) {
      padding = next
      update()
    },
  }
}

test('control: a prepend keeps the item at the offset (m2 starts at 240, offset 250)', () => {
  const { prepend, scrollToFn } = create(40, 250)
  prepend(8)
  expect(scrollToFn).toHaveBeenCalledTimes(1)
  expect(scrollToFn.mock.calls[0]![0]).toBe(1050)
})

test('a paddingStart-only change keeps the item at the offset', () => {
  const { setPaddingStart, scrollToFn } = create(40, 250)
  setPaddingStart(80)
  // m2 moved from 240 to 280; keeping it in place needs offset 290.
  expect(scrollToFn).toHaveBeenCalledTimes(1)
  expect(scrollToFn.mock.calls[0]![0]).toBe(290)
})

test('a reader inside the padding keeps the first item when the padding grows', () => {
  const { setPaddingStart, scrollToFn } = create(40, 33)
  setPaddingStart(80)
  // m0 was at viewport y 7 (40 - 33); it stays there at offset 73.
  expect(scrollToFn).toHaveBeenCalledTimes(1)
  expect(scrollToFn.mock.calls[0]![0]).toBe(73)
})
Steps to reproduce
  1. Save the file above as packages/virtual-core/tests/padding-anchor.test.ts.
  2. pnpm exec vitest run tests/padding-anchor.test.ts in packages/virtual-core.
  3. The control test passes; the two paddingStart tests fail (no scroll write).
Expected behavior

When anchorTo is 'end' and paddingStart changes, the item at the scroll offset keeps its viewport position, through the same anchor path a prepend uses (pending anchor, the hold during gestures, the clamped-write retry), also when the change arrives in its own update after a data change. A reader inside the padding (offset < paddingStart) anchors on the first item with a negative offset, as a prepend already does. A target outside the scroll range clamps once.

How often does this bug happen?

Every time

Platform

Any (core logic; reproduced in Node 24 with vitest).

tanstack-virtual version

@tanstack/virtual-core 3.19.11 (also 3.19.7)

Additional context

Related: #1339 (scrollMargin in the end-distance check, fixed in 3.19.8). We would be glad to open a PR if the expected behavior above is what you want.

Vorherrschende Sprache
TypeScript
Sterne
7.2k
Forks
490
Ø Merge
15 Std. 28 Min.
Gemergte PRs (30 T.)
48

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/virtual

Alle Issues in TanStack/virtual

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.