scroll to bottom while having async rendering items

[zerosoul]

Hi, I want the list scroll to bottom while first enter, but not work when list has async rendering item, how to fix this please?

here the demo: https://privoce.voce.chat/#/chat/channel/6
here the code: https://github.com/Privoce/vocechat-web/blob/main/src/routes/chat/Layout/MessageFeed.tsx#L44-L73

[oleggrishechkin]

Hi, @zerosoul

I write some advises below.

I added an indexesShift param. First, you can add initialindex={items.length - 1} e.g. last item index. Next anytime when you prepend items to the list you should inscrease indexesShift by added items count.

Your way with manual scrollToIndex should work too, but removing smooth scrolling not work - looks like this is an issue

In your case with smooth scroll to bottom I can recommend you use infinite requestAnivationFrame where you should check "is scroll at the bottom?" -> if not -> you scroll to bottom.

Also you can use prerender option in scrollToIndex - by default only 1 item (target for scrolling) will be rendered and then scroll to this item will be happened, with prerender you can render more items and it can improve your smooth scroll

scrollToIndex({ index: 100, prerender: 40 }) will render items from index=60 to index=140

[GuillaumeCisco]

I managed to fix it thanks to onViewportIndexesChange and scrollToIndex

useEffect(() => {
    if (!isScrolled && listRef.current) {
      listRef.current.scrollToIndex({
        index: comments.length - 1,
        alignToTop: true,
        prerender: 20,
      })
    }
  }, [filteredComments.length])

const onViewportIndexesChange = (e) => {
    if (!isScrolled && e[1] !== filteredComments.length - 1) setIsScrolled(true)
    else if (isScrolled && e[1] === filteredComments.length - 1) setIsScrolled(false)
  }