聊天机器人新增消息时聊天框自动滚动到底部实现方法

• 滚动容器配置错误：当前overflow: scroll属性绑定在.form-container元素上，但消息实际渲染在内部#chat-output容器内，且代码中从未在消息追加后执行滚动到底的逻辑。
• 异步消息未触发滚动：接口返回的消息是异步追加到DOM的，原逻辑没有在异步渲染完成后触发滚动操作，自然不会随新消息下移。

1. 调整CSS滚动容器配置 #

将滚动能力绑定到实际承载消息的#chat-output元素，同时用flex布局固定输入区、按钮位置，避免滚动条覆盖底部操作区：

.form-container {
  width: 400px;
  height: 450px;
  padding: 10px;
  background-color: white;
  position: relative;
  display: flex;
  flex-direction: column;
}
#chat-output {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
  /* 要平滑滚动效果就打开下面这行 */
  /* scroll-behavior: smooth; */
}

2. 封装通用滚动方法 #

在JS逻辑中添加统一的滚动到底函数，避免重复写代码：

function scrollToChatBottom() {
  const chatContainer = document.getElementById('chat-output');
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

3. 在所有消息追加节点调用滚动方法 #

• 用户提交输入、追加完用户发送的消息后，立即调用滚动方法
• 接口返回数据、追加完机器人响应的消息（包括文本、图片类消息）后，调用滚动方法

修改后的核心JS逻辑：

var outputArea = $('#chat-output');
function scrollToChatBottom() {
  const chatContainer = document.getElementById('chat-output');
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

$('#user-input-form').on('submit', function (e) {
  e.preventDefault();
  var message = $('#user-input').val();

  outputArea.append(`
    <div class='bot-message'>
      <div class='message'>
        ${message}
      </div>
    </div>
  `);
  // 用户消息追加完成后滚动
  scrollToChatBottom();

  const req = https.request(options, (res) => {
    res.setEncoding('utf8');
    res.on('data', (d) => {
      const myobj = JSON.parse(d);
      if ('narrative' in myobj.conversationalResponse.responses[0]) {
        const temp = myobj.conversationalResponse.responses[0].narrative.text;
        outputArea.append(`
      <div class='user-message'>
        <div class='message'>
          ${temp}
        </div>
      </div>
    `);
      } else if ('imageUrl' in myobj.conversationalResponse.responses[0]) {
        const img = myobj.conversationalResponse.responses[0].imageUrl;
        if ('narrative' in myobj.conversationalResponse.responses[1]) {
          const text_r = myobj.conversationalResponse.responses[1].narrative.text;
          outputArea.append(`
      <div class='user-message'>
      <div class ="message">
      ${text_r}
      <a href="${img}"></a>
      </div>
      </div>
    `);
        } else {
          outputArea.append(`
      <div class='user-message'>
        <div class='message'>
         <img src="${img}" width="300" height="200" onload="scrollToChatBottom()">
        </div>
      </div>
    `);
        }
      }
      // 机器人消息追加完成后滚动
      scrollToChatBottom();
    });
  });

  req.on('error', (error) => {
    console.error(error);
  });

  req.write(data);
  req.end();
  $('#user-input').val('');
});

额外处理：给图片标签绑定了onload事件，图片加载完成后会再次触发滚动，避免图片加载撑高容器导致滚动位置不准的问题。原代码中图片src留空的问题也一并修正，直接绑定接口返回的imageUrl字段。

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