How to keep chat anchored to end when using paddingEnd and scrollEndThreshold?

[andrewn]

I'm implementing a chat UI anchoring to the bottom. The height of the chat messages can increase when rendering due to dynamic content such as images/video and markdown content that is rendered async.

I've noticed that when paddingEnd is larger than scrollEndThreshold, then the chat doesn't stay anchored to the bottom as the final item expands in height. It tracks it for a while, but then stops.

I have a minimal repro here.

Is there some approach I should use to update the virtualiser?

  const virtualizer = useVirtualizer({
    anchorTo: 'end',
    directDomUpdates: true,
    followOnAppend: 'instant',

    // when this larger than `scrollEndThreshold` the scroll to bottom gets out of sync
    paddingEnd: 120,
    scrollEndThreshold: 80,

    count: rows.length,
    estimateSize: () => 72,
    getItemKey: (index) => rows[index]?.id ?? `missing-${index}`,
    getScrollElement: () => scrollRef.current,
  });