Scroll to Item

The message list exposes an imperative API to scroll to a specific item. This is useful when you want to scroll to a specific message or a specific index in the list.

caution

If you want to change the scroll location when updating the data of the list, make sure to use the respective data parameters instead. They are called at the right timing and will not cause unnecessary re-renders and incorrect scroll position due to changed item sizes.

Live Editor

function App() {
  const ref = React.useRef<VirtuosoMessageListMethods>(null);
  const offset = React.useRef(100);

  return (
    <>
      <button
        onClick={() => {
          ref.current.scrollToItem({ index: 50, align: "center" });
        }}
      >
        Scroll to Item 50 in the center
      </button>{" "}
      <VirtuosoMessageListLicense licenseKey="">
        <VirtuosoMessageList
          ref={ref}
          style={{ height: 400 }}
          initialData={Array.from({ length: 100 }, (_, index) => index)}
        />
      </VirtuosoMessageListLicense>
    </>
  );
}

Result