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,
  });

[barry166]

scrollEndThreshold needs to cover the bottom padding too. The end-following logic only keeps following while the viewport is considered “at the end”; with paddingEnd: 120 and scrollEndThreshold: 80, sitting at the bottom of the messages but above the padded area can fall outside that window, so later dynamic height changes stop being followed.

Use either:

paddingEnd: 120,
scrollEndThreshold: 120, // or a bit larger

or reduce paddingEnd below the threshold. For async image/markdown growth, also make sure each row is measured with ref={virtualizer.measureElement} / data-index, otherwise the anchor cannot adjust to the real final height.