图像加载后在 div 中将滚动到底部

Question

我有一个聊天应用程序，当我发送新消息时，我试图滚动到底部，但是当我尝试上传图像时遇到问题。我认为应用程序在加载图像之前立即滚动，因此仍然在图像中间。这是我的AlwaysScrollToBottom组件(位于消息框的另一个div中(：

import React, { useEffect, useRef } from "react";
const AlwaysScrollToBottom = () => {
const elementRef = useRef();
useEffect(() => {
return () => {
elementRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
};
});
return <div ref={elementRef}></div>;
};
export default AlwaysScrollToBottom;

这是我尝试滚动的应用程序的一部分

<div className="chat-messages">
{chats &&
match.params.id &&
chats.map((chat) => (
<MessageBox key={chat._id} chat={chat} user={user} />
))}
<AlwaysScrollToBottom />
</div>

Answer 1

我认为您不能将此组件用于图像。因为图像在初始时刻的高度为 0px。并且您必须使用图像的onload回调来检测图像加载的时刻。

你可以在这里看到关于检测这一刻的答案