Div 在聊天中没有溢出

Question

我正在尝试创建一个聊天，但在一些消息之后，新消息没有出现在屏幕上，我想溢出，用户向下滚动消息，但只有几条消息出现在那个数字之后什么都没有发生，只是以静态方式显示以前的消息，我正在使用 React 和 Socket.io。 代码：

const [messagesAndAuthors, setMessagesAndAuthors] = useState<any>([]);

useEffect(() => {
            socket.on('receivedMessage', (newMessage:{}) => {
                messagesAndAuthors([...messagesAndAuthors, newMessage])
            });
    })
    
function sendingMessages(e : FormEvent) {
        e.preventDefault();
        if(message.trim()) {
            const messageObject = {
                userName,
                message,
                roomId
            };

            socket.emit('sendMessage', messageObject);
        }

        setMessage('');


    }
    
----------------------------BACK-END(SOCKET.IO):

socketInfo.on('sendMessage', (data:any) => {
        socketInfo.broadcast.emit('receivedMessage', data);
    });

.chat-container {
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font: 400 1rem 'Sulphur Point';
    background-color: #254441;
    padding: 2rem 0;
    border-radius: 2rem;
    justify-content: space-between;
    text-align: center;
    max-height: 77.5vh;
    overflow: auto;
}

.chat-container h1 {
    background-color: #ff6f59;
    padding: 0.2rem 4rem;
    border-radius: 2rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.messages-container {
    text-align: start;
    background-color: #254441;
    border-radius: 2rem;
    height: 90%;
    margin-bottom: 0.5rem;
    overflow: auto;
}

.messages-mine-style {
    width: 15rem;
    border: transparent;
    border-radius: 1.5rem;
    margin-top: 2rem;
    text-decoration: none;
    text-align: start;
    list-style: none;
    font: 700 1.4rem 'Sulphur Point';
    padding: 0.2rem 0.6rem;
    margin: 1rem 0;
}

.messages-mine-style li{
    margin-left: 1rem;
}

.messages-mine-style li+li {
    font: 400 1.4rem 'Sulphur Point';
}

.chat-container input {
    background-color: #ff6f59;
    padding: 1rem 4rem;
    border-radius: 2rem;
    text-align: center;
    font: 700 1.2rem 'Sulphur Point';
    outline: none;
    border: transparent;
}

.chat-container input::placeholder {
    color: #254441;
}

<form onSubmit={sendingMessages} className="chat-container">
                        <h1>Chat</h1>
                        <div className="messages-container">
                        {messagesAndAuthors.map((messageWithTheAuthor:any) => {
                                 return (
                                    <>
                                    <ul className="messages-mine-style">
                                        <li key={messageWithTheAuthor.author}>{messageWithTheAuthor.author}: </li>
                                        <li>{messageWithTheAuthor.message}</li>
                                    </ul> 
                                    </>
                                )        
                        })}
                        </div>                                                                      
                        <input value={message} onChange={(e) => {setMessage(e.target.value)}} type="text" placeholder="Digite sua mensagem"/>        
</form>

Answer 1

这是一个例子。您需要对其进行修改以使其适合您，但它应该是一个很好的起点。

function updateScroll() {
  let el = document.getElementsByClassName("chat")[0];
  let offset = el.scrollHeight - el.scrollTop;
  if (offset < 120) el.scrollTop = el.scrollHeight;
}

var messageNumber = 1;

function addMessage() {
  let msg = "<li class=\"chat-message\">new message "+ messageNumber++ +"</li>";
  document.getElementsByClassName("chat-messages")[0].innerHTML += (msg);
  updateScroll();
}

setInterval(addMessage, 2000);
addMessage();

.chat {
  width: 250px;
  height: 100px;
  overflow: auto;
  background-color: darkgray;
  border: solid black 1px;
  border-radius: 2px;
}

.chat-message {
  list-style-type: none;
}

.chat-messages {
padding: 0px;
padding-left: 5px;
margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat">
  <ul class="chat-messages">
  </ul>
</div>

此示例仅在用户向下滚动时才会向下滚动。如果用户向上滚动（例如阅读以前的消息），则不会向下滚动。