css - 有没有办法将div的高度设置为 `overflow-y: auto`

Question

我有一个 div 设置为 overflow-y: auto。我可以在没有 overflow-y: auto 的情况下检查 div 的高度及其内容吗？

我想保留 overflow-y: auto 并知道 div 的高度是多少，就像没有 overflow-y: auto

更具体:

我有一个聊天窗口。聊天包含文本和图像形式的消息。聊天 div 设置为 overflow-y: auto 并且在 div 的底部我有另一个 div 包含 ref={ scrollToBottomRef}

然后我有 useEffect 钩子(Hook):

  useEffect(() => {
    scrollToBottomRef.current.scrollIntoView({
      behavior: 'smooth'
    });
  });

这很好用。加载消息后，我会向下滚动到底部。当邮件包含图像时会出现此问题。然后我在渲染图像之前将滚动条向下滚动到底部，因此在一秒钟后滚动条从底部向上凸起。

我该如何解决这个问题？

Answer 1

这是 Element.scrollHeight 的目的，正如@Scrimothy 指出的那样。它几乎适用于所有浏览器，没有任何问题。它包括填充，但不包括边框或边距。如果内容没有填满整个 div，它返回 div 的高度。