how to scroll div to bottom zero when new message pop ups in react js

Question

I am building a chat application. Although everything is working perfectly fine. But the problem here is when user types new msg it goes below the chat display area and user have to manually scroll down to see the message. I want to know how can I resolve this issue in my app. so that when message is submitted the it appears immediately in the chat area.

Here is my code .

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>

This is the ui

Is this what you need ? https://stackoverflow.com/a/270628/9868549 By the way, if a user tryto read old message and is automatically scrolled down it can be annoying ;) — Quentin Grisel, May 03 '20 at 03:39
no i don't want this all the time i want only when user submit a message. the current message should be visible. Right now it is going down the message text area — aditya kumar, May 03 '20 at 03:42

score 0 · Answer 1 · answered May 03 '20 at 04:57

One of the things you can do is to create a ref on the div which renders the chat messages. Upon submitting a chat message just do ref.current.scrollTop = ref.current.scrollHeight;

Code Snippet:

import React, { useState, useEffect, useRef } from "react";

const MessageContainer = props => {
    const [messages, setMessages] = useState([]);
    const ref = useRef();
    useEffect(() => {
        // api call get messages
        setMessages([...]);
    }, [messages])

    const submitMessage = () => {
        // post message to server
        ref.current.scrollTop = ref.current.scrollHeight;
    }

  return <>
        ... 
        <Grid  item xs={12}>
            <div ref={ref} 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>
      <form onSubmit={submitMessage}>
        <input type='text'/>
        <button type='submit'>Submit</button>
      </form>
     ...
      </>
};

export default MessageContainer;

how to scroll div to bottom zero when new message pop ups in react js

1 Answers1