react-window scroll to bottom

Question

I'm using react-window to render a long list to show messages. but how can I move scroll to bottom for each new messages?

I could handle it for normal Div by using useRef, but what about react-window?

const list = useRef<HTMLDivElement>(document.createElement('div'));

  useEffect(() => {
    list.current.scrollTop = list.current.scrollHeight;
  }, [message]);

and:

<FixedSizeList
  width="100%"
  height={500}
  itemCount={messages.length}
  itemSize={40}
  itemData={messages}
 >
    {Row}
 </FixedSizeList>

bopbopbop · Accepted Answer · 2022-01-26 13:07:41Z

2

I'd create a ref to attach to FixedSizeList, then create a function that scrolls to the bottom of that list and have an effect that listens to when a new item is added to the list. Something like:

function ListComponent({ messages }) {
  const listRef = useRef(null);
  
  const scrollToBottom = () =>
      listRef?.current.scrollToItem(messages.length);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  return (
    <FixedSizeList
      width="100%"
      height={500}
      itemCount={messages.length}
      itemSize={40}
      itemData={messages}
      ref={listRef}
    >
      {Row}
    </FixedSizeList>
  );
}

answered Jan 26, 2022 at 13:07

bopbopbop

5223 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-window scroll to bottom

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related