当react js中弹出新消息时如何将div滚动到最低的0]

Question

我正在构建聊天应用程序。尽管一切都很好。但是这里的问题是，当用户键入新的味精时，它会进入聊天显示区域下方，并且用户必须手动向下滚动才能看到消息。我想知道如何在我的应用程序中解决此问题。这样，在提交消息时，它会立即显示在聊天区域中。

这是我的代码。

chatRoomPage.js

<Grid  item xs={12}>
                    <div style={{maxHeight: '500px', height: '500px',
                        position: 'fixed',width:'100%',
                        overflow: 'auto'}}>
                    {receivedMessage && receivedMessage.content &&
                    receivedMessage.content.map((item,index) => {
                        if(item.senderId === item.vendorId) {
                            return (
                            <ChatThread key={index} image={item.senderImage} right={true} content={item.content}/>
                            )
                        }else {
                        return (
                            <ChatThread key={index}  image={item.reciverImage} content={item.content}/>
                        )}
                    }) }
                    </div>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </Grid>

这是用户界面

我正在构建聊天应用程序。尽管一切都很好。但是这里的问题是，当用户键入新的味精时，它会进入聊天显示区域的下方，用户必须手动滚动...

Answer 1

您可以做的一件事情是在div上创建一个引用以呈现聊天消息。提交聊天消息后，只需执行ref.current.scrollTop = ref.current.scrollHeight;