如何结合scroll-behavior: smooth与overflow-anchor: auto实现流畅聊天滚动？

我尝试结合scroll-behavior: smooth与overflow-anchor CSS属性，实现聊天应用经典的「保持在底部」行为：

• 新消息出现在聊天区域底部
• 聊天区域未滚动到底部时，新增消息不触发滚动，现有内容保持在屏幕上
• 聊天区域已滚动到底部时，新增消息后自动向下滚动到最新内容

目前功能正常，但scroll-behavior: smooth完全没起作用，滚动过程没有平滑效果，代码如下：

原代码 #

HTML

<div class="chat-area">
  <!-- 新消息将动态插入此处 -->
  <div class="anchor"></div>
</div>

CSS

.chat-area {
  scroll-behavior: smooth;
  /* 补充：需设置高度和overflow才能实现滚动 */
  height: 300px;
  overflow-y: auto;
}

.chat-area * {
  overflow-anchor: none;
}

.anchor {
  overflow-anchor: auto;
  height: 1px;
}

.message {
  border: 1px solid black;
  padding: 12px;
  margin: 6px;
  background-color: #ccc;
}

JavaScript

let chatArea = document.querySelector('.chat-area');
let anchor = document.querySelector('.anchor');

let messages = [
  'I wondered why the baseball was getting bigger. Then it hit me.',
  'Police were called to a day care, where a three-year-old was resisting a rest.',
  'Did you hear about the guy whose whole left side was cut off? He’s all right now.'
];

function randomMessage() {
  return messages[(Math.random() * messages.length) | 0];
}

function addMessage() {
  let message = document.createElement('div');
  message.className = 'message';
  message.innerText = randomMessage();
  chatArea.insertBefore(message, anchor);
}
setInterval(addMessage, 1000);

解决方案 #

浏览器的overflow-anchor自动滚动属于原生即时行为，不会遵循scroll-behavior: smooth的设置。要实现平滑滚动，需要手动判断滚动状态，再触发带平滑参数的滚动操作：

1. 添加消息前，判断聊天区域是否已经滚动到底部
2. 如果处于底部，添加消息后调用scrollTo并指定behavior: 'smooth'
3. 保留overflow-anchor逻辑，确保未在底部时内容不会意外跳动

修改后的完整代码 #

HTML

<div class="chat-area">
  <!-- 新消息将动态插入此处 -->
  <div class="anchor"></div>
</div>

CSS

.chat-area {
  scroll-behavior: smooth;
  height: 300px;
  overflow-y: auto;
}

.chat-area * {
  overflow-anchor: none;
}

.anchor {
  overflow-anchor: auto;
  height: 1px;
}

.message {
  border: 1px solid black;
  padding: 12px;
  margin: 6px;
  background-color: #ccc;
}

JavaScript

let chatArea = document.querySelector('.chat-area');
let anchor = document.querySelector('.anchor');

let messages = [
  'I wondered why the baseball was getting bigger. Then it hit me.',
  'Police were called to a day care, where a three-year-old was resisting a rest.',
  'Did you hear about the guy whose whole left side was cut off? He’s all right now.'
];

function randomMessage() {
  return messages[(Math.random() * messages.length) | 0];
}

function addMessage() {
  // 添加消息前判断是否处于滚动底部（留10px误差避免边界问题）
  const isAtBottom = chatArea.scrollTop + chatArea.clientHeight >= chatArea.scrollHeight - 10;
  
  let message = document.createElement('div');
  message.className = 'message';
  message.innerText = randomMessage();
  chatArea.insertBefore(message, anchor);
  
  // 如果之前在底部，手动触发平滑滚动
  if (isAtBottom) {
    chatArea.scrollTo({
      top: chatArea.scrollHeight,
      behavior: 'smooth'
    });
  }
}
setInterval(addMessage, 1000);

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