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

Abierto
  • ¿Algo no está bien?
#1,366 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@duongynhi000001-crypto ya está trabajando en esto.

Desde el 5/11/2026.

  • #1370 de @duongynhi000001-crypto — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
7.2k
Forks
490
Merge medio
15 h 28 min
PR fusionados (30 d)
48

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/virtual

Todos los issues de TanStack/virtual

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.