scrollToIndex unreliable?

[Zerebokep]

Describe the bug
It seems using .scrollToIndex sometimes doesn't work, unfortunately I can't provide an example as I'm not be able to reproduce it, it only happens occasionally.

To Reproduce

virtualizer.scrollToIndex(messages.length - 1, {
        align: 'start',
      })

Expected behavior
scroll to the given index

Additional context
using it with requestAnimationFrame or settimeout seems to fix the issue:

    requestAnimationFrame(() =>
      virtualizer.scrollToIndex(messages.length - 1, {
        align: 'start',
      })
    )

p.s. I don't think it's an timing issue, as I'm using an effect which solely has messages as dependency, so the index should be correct.

[inokawa]

Does anyone have a reproducible example?

[carlosbensant]

For me, it only started happening when I added the smooth: true option.

.scrollToIndex(entries.length - 1, { align: 'end' }) // Working fine

vs

.scrollToIndex(entries.length - 1, { align: 'end', smooth: true }) // Working unreliable

The issue: The chat always starts at the bottom, and when I slowly scroll to the top, the scroll-to-bottom button appears (usually at 300px from the bottom) and stays visible, but it doesn't work unless I scroll to the top really fast or I reach a certain position (like ~1000px from the bottom), and once it starts working it doesn't fail unless I refresh the page again.

My example can be easily reproducible since I just added a new ScrollToBottomButton component to the chat-viewer example:
https://github.com/wix-incubator/chat-viewer/blob/master/lib/chat-viewer.tsx

  const handleScrollToBottom = () => {
    console.log('handleScrollToIndex!', entries.length - 1)
    handlers.scrollToIndex(entries.length - 1, { align: 'end' })
  }

  return (
    <div className={cn(className, 'h-full relative')}>
      <VList
        reverse={reverse}
        ref={vListHandle}
        style={vListStyle}
        shift={shift}
        className={cn(scrollerClassName, 'pb-2.5')}
        bufferSize={bufferSize}
        keepMounted={keepMounted}
        ssrCount={ssrCount}
        onScroll={handleScroll}
        onScrollEnd={onScrollEnd}
        onWheel={onWheel}
        onKeyDown={onKeyDown}
      >
        {children}
        {items.map(({ id, element }) => (
          <Fragment key={id}>{element}</Fragment>
        ))}
      </VList>
      <JumpToBottomButton isAtBottom={atBottom} scrollToBottom={handleScrollToBottom} />
    </div>
  )
}

The ScrollToBottomButton component

export type JumpToBottomButtonProps = ComponentProps<typeof Button> & {
  isAtBottom: boolean
  scrollToBottom: () => void
}

export const JumpToBottomButton = ({
  className,
  isAtBottom,
  scrollToBottom,
  ...props
}: JumpToBottomButtonProps) => {
  console.log(isAtBottom, 'isAtBottom')
  return (
    !isAtBottom && (
      <Button
        className={cn(
          '-translate-x-1/2 absolute bottom-4 left-1/2 z-10 rounded-full shadow-lg',
          className,
        )}
        onClick={() => scrollToBottom()}
        size="icon"
        type="button"
        variant="outline"
        {...props}
      >
        <ArrowDown className="size-4" />
      </Button>
    )
  )
}

[carlosbensant]

@inokawa Any idea? I want to enable the smooth interaction feature.

[Desteel]

I implemented a custom animated scroll fn that takes all the calculations and just calls scrollTo as is without virtua built in animation. It seems that the issue is that virtua's smooth scrolling is interrupted due to recalculating the size and positions of the elements