1、普通div包裹聊天内容：

<div className="chat-record" ref={chatContainerRef}>
 {messages.map((message) => (
      <MessageComponent message={message}/>
))}
    <div ref={messagesEndRef} />
</div>
2、css页面
.chat-record{
width:100%;
height:85%;
overflow-y: auto;
padding-top: 300px;
padding-bottom:100px;
box-sizing: border-box;
}
3、发送消息时滚动到底部，可以看到最后一条消息：scrollIntoView
//随着消息列表的增加，始终保持最新消息在可视范围之内，滑动到最底部
useEffect(() => {
scrollToBottom()
}, [messages]);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
}
2、uniapp使用<scroll-view>组件包裹聊天内容，滚动到指定id位置：scroll-into-view

<scroll-view class="scroll-box" scroll-y="true" @scrolltoupper="onScrollToTop"
     :scroll-into-view="'chat-item-'+scrollMsgIdx">
<view v-for="(msgInfo,index) in chat.messages" :key="idx">
<chat-message-item v-if="index>=showMinIdx" :headImage="headImage(msgInfo)"
:showName="showName(msgInfo)" @recall="onRecallMessage" @delete="onDeleteMessage"
@longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile" :id="'chat-item-'+index"
:msgInfo="msgInfo" :groupMembers="groupMembers">
</chat-message-item>
</view>
</scroll-view>

解析：<chat-message-item>是引入的子组件，通过遍历messages数组给其动态指定id名称,:scroll-into-view=id用来指定滚动的位置,通过修改scrollMsgIdx的值就能确定具体位置