javascript - 反应窗口滚动到底部

Question

我正在使用 react-window 呈现一个长列表来显示消息。但是如何将每条新消息的滚动滚动到底部？

我可以通过使用 useRef 来处理普通的 Div，但是 react-window 呢？

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

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

和：

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

Answer 1

我将创建一个要附加到的 ref FixedSizeList，然后创建一个滚动到该列表底部的函数，并在将新项目添加到列表时产生监听效果。就像是：

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>
  );
}