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

Đang mở
  • Có gì không ổn?
#1,366 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@duongynhi000001-crypto đang làm issue này rồi.

Từ ngày 5/11/2026.

  • #1370 của @duongynhi000001-crypto — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
30/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
7.2k
Fork
490
Merge trung bình
15 giờ 28 phút
Pull request đã merge (30 ngày)
48

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/virtual

Tất cả issue của TanStack/virtual

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.