如何在reactJS中从页面底部开始并向上滚动

Question

所以我正在制作一个具有群聊功能的react webApp。除了一件事，一切都很顺利。我不希望聊天在输入后默认显示在屏幕底部，然后向上滚动查看旧消息。我已经尝试了整个useEffect滚动到底的废话，它工作得很好，只是如果我能让我的聊天更像whatsApp会更好。我需要一个更干净的解决方案，我发现的只是半吊子的解决方案。有人知道whatsApp是怎么做到的吗？

以下是我目前正在使用的内容，以防有人想要快速修复。我只是把它放入useEffect中，并在"getMessages"获取的末尾。

const scrollToBottom = () => {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: 'auto'
/* you can also use 'auto' behaviour 
in place of 'smooth' */
})
};

Answer 1

我使用这个

function ScrollToBottom(){
const elementRef = useRef();
useEffect(() => elementRef.current.scrollIntoView());
return <div ref={elementRef} />;
};

然后你就在信息的末尾打电话给它。

<p>some message</p>
<p>another message</p>
<ScrollToBottom />