how to scroll to bottom of a list at init

[xu33]

I'm using useVirtualizer, dynamic mode
Like a chat message list, i want to start at the bottom of the scroller
I currently do this, but the result is not at the bottom, i guess i shoud do this when the measument is end, but there isn't a event
useEffect(() => { rowVirtualizer.scrollToIndex(data.length - 1) }, [])

[Yaropolki4]

You can use something like this

const items = rowVirtualizer.getVirtualItems();
const isMountedScrollToBottomRef = useRef(false);
const scrollToBottom = useCallback(
    ({ behavior = "smooth" }: { behavior?: ScrollToOptions["behavior"] } = {}) => {
     requestAnimationFrame(() => {
        rowVirtualizer.scrollToIndex(footerIndex, {
        align: "end",
        behavior,
      });
     })
    },
    [rowVirtualizer, footerIndex],
  );

  useLayoutEffect(() => {
    if (!isMountedScrollToBottomRef.current && items.length > 0) {
      isMountedScrollToBottomRef.current = true;
      scrollToBottom({ behavior: "auto" });
    }
  }, [items, scrollToBottom]);

[WebKieth]

It's not working

[WebKieth]

This is a bug, which provided by lib from creation. A lot of issues was closed with MRs, which wasnt fix anything.
So it has only one solution. Scroll it in a loop again and again and stop scrolling when real ref element scrollTop + offsetHeight property will equals total size of scroll belt.

  const parentRef = useRef<HTMLDivElement>(null);
  const { rows } = table.getRowModel();

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 60,
    overscan: 1,
  });

  const handleScrollToTop = () => {
    virtualizer.scrollToIndex(0, {
      behavior: 'smooth',
      align: 'start'
    })
  };

  const sleep = (ms: number) => {
    return new Promise((resolve) => setTimeout(resolve, ms))
  }

  const handleScrollToBottom = async () => {
    if (!parentRef.current) return
    let currentScrollBottom = parentRef.current.offsetHeight;
    const totalScrollBeltHeight = virtualizer.getTotalSize();
    while (currentScrollBottom < totalScrollBeltHeight) {
      virtualizer.scrollToIndex(rows.length - 1, {
        behavior: 'smooth',
        align: 'end'
      })
      await sleep(50);
      currentScrollBottom = parentRef.current.scrollTop + parentRef.current.offsetHeight;
      console.log(currentScrollBottom, totalScrollBeltHeight)
    }
    console.log('end', currentScrollBottom, totalScrollBeltHeight)
  };

Looks terrible, works terrible and as lib on my opinion is terrible. But it is only one workaround which really works for me.
UPD:
Works a little bit better when I replaced scrollToIndex function for native el.scrollTo and added infinite loop refuse logic:

  const handleScrollToTop = () => {
    if (!parentRef.current) return
    parentRef.current.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  };

  const sleep = (ms: number) => {
    return new Promise((resolve) => setTimeout(resolve, ms))
  }

  const handleScrollToBottom = async () => {
    if (!parentRef.current) return
    let currentScrollBottom = parentRef.current.offsetHeight;
    const totalScrollBeltHeight = virtualizer.getTotalSize();
    let emptyIterationCount = 0;
    while (currentScrollBottom < totalScrollBeltHeight && emptyIterationCount < 2) {
      parentRef.current.scrollTo({
        top: currentScrollBottom,
        behavior: 'smooth'
      })
      await sleep(50);
      const newScrollBottom = parentRef.current.scrollTop + parentRef.current.offsetHeight
      if (newScrollBottom === currentScrollBottom) {
        emptyIterationCount++;
        continue
      }
      currentScrollBottom = newScrollBottom;
    }
  };

[piecyk]

@WebKieth Thanks for sharing your workaround! Just to clarify, is the main issue you’re seeing that scrollToIndex doesn’t properly scroll to the bottom on initial render?

[fractaljs]

@WebKieth @piecyk wanted to check if there is a more elegant soln to this issue.

Using @WebKieth gives a jittery exp to a chat interface i am working on currently. Would be helpful if you have a soln for this

@WebKieth to answer your question and assuming that other are facing the same issue

1. Scroll to bottom works as intended but fails by a small margin of around 40px thereby clipping the end of the last message by a slight margin
2. It happens on both initial render and invoked scroll to bottom

Would be happy to share more in case you need more inputs

[piecyk]

@fractaljs Should be fix in @tanstack/react-virtual@3.13.15