shouldAdjustScrollPositionOnItemSizeChange logic for infinite upwards scroll / messaging UI

[GarrisonBates]

I'm building a text messaging-like functionality into my web app. It has a pretty standard layout, most recent messages at the bottom, and scrolling up to the top of the container fetches the next page (older messages).

When doing reverse infinite scroll, some logic is required to handle the scrollbar, otherwise you'll see a big jump. This is the primary logic that fires when elements are prepended to the list.

const deltaScrollHeight =
          scrollContainerRef.current.scrollHeight - prevScrollHeightRef.current
        scrollContainerRef.current.scrollTop = deltaScrollHeight

It works like a charm some of the time, but other times elements get measurements updated after scrollTop is updated, causing a jump in scroll position relative to where the user was.

If I set virtualizer.shouldAdjustScrollPositionOnItemSizeChange to () => true it fixes this issue, but it causes issues elsewhere. For example, when a user receives a new message, they should be scrolled to the bottom of the screen so that the new message is in view. But shouldAdjustScrollPositionOnItemSizeChange triggers a scroll as well, which breaks my logic.

I'm having a difficult time conceptualizing exactly what the ideal logic is here. Basically, when do I want shouldAdjustScrollPositionOnItemSizeChange to return true, and when should it return false in this scenario? I initially thought that it was anytime the item was at least partially in the viewport or above the viewport, but that logic still doesn't work properly.

[piecyk]

This shouldAdjustScrollPositionOnItemSizeChange is there to override the default logic that tries to fix scroll jumping issues. For example, when you jump into the middle of the list and start scrolling upward to the beginning, if the actual row sizes differ significantly from the estimated ones, the scroll height can change, causing the list to jump.

In general, it makes sense to adjust the scroll position when scrolling up most cases, we have a PR to make it default #1002

[GarrisonBates]

I still haven't been able to get it to work consistently. My testing also included a fairly long message (larger than the viewport), just to address that edge case, so that's probably contributed to the difficulty. Because scrolling up when loading pages with short messages in works for the most part.

I ended up just putting off the messaging feature for later release. I'd definitely still like to do it, and it's fully built except for the infinite scroll jumping. If you do end up reworking #1002 I'll give it another shot with that, hopefully the problem is fully due to the shouldAdjustScrollPosition logic.

[piecyk]

My testing also included a fairly long message (larger than the viewport), just to address that edge case, so that's probably contributed to the difficulty. Because scrolling up when loading pages with short messages in works for the most part.

We can tweak the example to include some messages like this.

[piecyk]

@GarrisonBates hmm updated the example and looks good https://stackblitz.com/edit/tanstack-query-p2sjt5nc?file=src%2Fpages%2Findex.js on line 26 we define the item size min/max

[piecyk]

One quick question, do any of the items change size after they're mounted? Like resolving extra content or media that expands the height with a delay? That could definitely cause scroll jumping and might explain the inconsistency you're seeing.

[HDUysz]

@GarrisonBates嗯，更新了示例，看起来不错https://stackblitz.com/edit/tanstack-query-p2sjt5nc?file=src%2Fpages%2Findex.js在第 26 行我们定义了项目大小的最小值/最大值

In my project, when I scroll up to load older messages, the data is fetched dynamically from the backend. The heights of these chat messages vary significantly and are not uniform. I've found that after new data is fetched and prepended, the page jumps down a certain distance instead of maintaining the scroll position on the current element. Is this expected behavior? I tried using shouldAdjustScrollPositionOnItemSizeChange, but it didn't solve the problem.