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

Ouverte
  • Quelque chose ne va pas ?
#1,366 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@duongynhi000001-crypto y travaille déjà.

Depuis le 5/11/2026.

  • #1370 par @duongynhi000001-crypto — ouverte

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
30/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
7.2k
Forks
490
Merge moyen
15 h 28 min
PR mergées (30 j)
48

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/virtual

Toutes les issues de TanStack/virtual

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.