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

Aberta
  • Algo errado?
#1,366 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

@duongynhi000001-crypto já está trabalhando nisso.

Desde 5/11/2026.

  • #1370 de @duongynhi000001-crypto — aberto

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
30/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
typescript
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
7.2k
Forks
490
Merge médio
15h 28min
PRs com merge (30d)
48

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/virtual

Todas as issues de TanStack/virtual

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.