css - 为什么 useRef 和 scrollIntoView 会破坏我的利润？

Question

我正在创建一个 React 聊天应用程序。消息历史记录在 aul中，它在带有 的 div 中margin-top: 20px。我现在正试图让应用程序在收到消息时滚动到底部。我尝试添加以下元素作为最后一项ul：

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

这具有始终使最后一条消息可见的预期效果。然而，这段代码现在不知何故导致包含 ul 的 div 捕捉到身体的顶部，没有边距。如果我打开开发人员工具，我可以看到margin-top仍然处于活动状态 - 如果我禁用它并重新启用它，则 div 的位置已更正，但每当我发送消息时它都会重置。

有人可以解释这如何影响外部 div 的 margin-top 吗？我基本上想做的是找到列表中的最后一个元素，然后做

element.scrollTop = element.scrollHeight

但我想不使用 ReactDom.findNode(this)

谢谢。