如何实现消息填满后可滚动的聊天式方块？

数据老陈

2026-7-8

聊天框滚动功能修复方案

核心问题分析

你当前的代码里，消息元素(message/reply)直接插入到body中，且用固定的left/top值定位，完全脱离了聊天容器#sqar的范围，所以给容器加overflow-y:auto自然不会生效。要实现滚动，必须把所有消息放在容器内部，让容器成为消息的父级。

分步修复代码

1. 修正HTML结构

调整消息容器结构，确保所有消息都在#sqar内部：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Game</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="script.js"></script>
</head>
<body>
  <div id="for">
    <input class="rab" id="tach" autocomplete="off">
    <button id="user" onclick="sent()">Send</button>
  </div>
  <!-- 聊天容器，内部承载所有消息 -->
  <div id="sqar">
    <div id="message-container"></div>
  </div>
</body>
</html>

2. 调整CSS样式

给聊天容器添加滚动属性，重构消息布局，移除固定定位：

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#for {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
  position: fixed;
  bottom: 0;
  left: 30%;
  right: 30%;
  display: flex;
  height: 3rem;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  cursor: normal;
}

#for>button {
  background: #333;
  border: none;
  padding: 0 1rem;
  margin: 0.25rem;
  border-radius: 3px;
  outline: none;
  color: #fff;
  cursor: pointer;
}

#tach {
  border: none;
  padding: 0 1rem;
  flex-grow: 1;
  border-radius: 2rem;
  margin: 0.25rem;
  cursor: text;
}

#tach:focus {
  outline: none;
}

/* 聊天容器核心样式 */
#sqar {
  position: fixed;
  height: 250px;
  background: #505050;
  border: 4px solid #27282c;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 10px 2px #27282c;
  bottom: 5.886%;
  left: 30%;
  right: 30%;
  cursor: normal;
  /* 启用垂直滚动 */
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
}

/* 消息容器，实现消息的垂直排列和对齐 */
#message-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 用户消息：右对齐 */
message {
  display: inline-block;
  max-width: 70%;
  background: white;
  opacity: 0.9;
  color: black;
  border-radius: 4px;
  padding: 6px 10px;
  align-self: flex-end;
}

/* 回复消息：左对齐 */
reply {
  display: inline-block;
  max-width: 70%;
  background: rgb(172, 172, 172);
  opacity: 0.9;
  color: black;
  border-radius: 4px;
  padding: 6px 10px;
  align-self: flex-start;
}

@keyframes wrong {
  0% { color: white; }
  50% { color: red; }
  100% { color: white; }
}

3. 修改JS逻辑

将消息插入到容器内部，添加自动滚动功能，修复缺失的重置函数：

var hi = 0;
var uses = 0;

function sent() {
  if (uses >= 0) {
    filter();
  }
  uses++;
}

function filter() {
  const input = document.getElementById("tach");
  const Text = input.value.trim();

  if (Text === '') {
    input.style.animation = "wrong 1s linear";
    input.value = "Must Contain a letter";
    input.readOnly = true;
    input.addEventListener("animationend", Re);
  } else if (Text.length === 1) {
    input.style.animation = "wrong 1s linear";
    input.value = "Must Have more than 1";
    input.readOnly = true;
    input.addEventListener("animationend", Re);
  } else if (Text.toLowerCase() === "hi") {
    addMessage(`You:${Text}`, 'user');

    if (hi === 0) {
      sleep(2000).then(() => {
        addMessage("Unknown:Hello", 'reply');
        hi++;
      });
    } else if (hi === 1) {
      sleep(2000).then(() => {
        addMessage("Unknown:Stop saying hello", 'reply');
        hi++;
      });
    } else if (hi === 2) {
      sleep(2000).then(() => {
        addMessage("Unknown:STOP saying hello", 'reply');
        hi = 1;
      });
    }
  } else if (/[a-z]/i.test(Text)) {
    addMessage(`You:${Text}`, 'user');
  } else {
    input.style.animation = "wrong 1s linear";
    input.value = "Can't Contain a number";
    input.readOnly = true;
    input.addEventListener("animationend", Re);
  }
}

// 统一添加消息的工具函数
function addMessage(content, type) {
  const messageContainer = document.getElementById("message-container");
  const msgElement = document.createElement(type === 'user' ? 'message' : 'reply');
  msgElement.textContent = content;
  messageContainer.appendChild(msgElement);
  // 自动滚动到最新消息
  messageContainer.scrollTop = messageContainer.scrollHeight;
  // 清空输入框
  document.getElementById("tach").value = '';
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 修复缺失的输入框重置函数
function Re() {
  const input = document.getElementById("tach");
  input.readOnly = false;
  input.value = '';
  input.style.animation = '';
}

关键修复点说明

消息嵌套容器：所有消息都放在#sqar内部的#message-container中，让容器的滚动属性对内容生效；
移除硬定位：通过flex布局实现消息的左右对齐，适配容器宽度，避免固定定位脱离文档流；
自动滚动：每次添加消息后，设置scrollTop = scrollHeight，让容器自动滚动到最新消息位置；
统一逻辑：封装addMessage函数，减少重复代码，同时处理输入框清空操作。

内容的提问来源于stack exchange，提问作者Exempt