如何让div内滚动条在内容溢出时默认始终处于底部？

一、让滚动条默认保持在底部 #

当消息容器内容更新后，通过以下两种方式将滚动位置固定在底部：

• 方式1：利用scrollTop和scrollHeight直接定位

const messageContainer = document.getElementById('messageContainer');
// 每次新增消息后执行此代码
messageContainer.scrollTop = messageContainer.scrollHeight;

如果需要自动监听内容变动（比如动态添加消息），可以用MutationObserver实现自动滚动：

const container = document.getElementById('messageContainer');
const observer = new MutationObserver(() => {
  container.scrollTop = container.scrollHeight;
});
// 监听容器内的子元素变化
observer.observe(container, { childList: true, subtree: true });

• 方式2：通过最后一条消息元素定位
  如果每条消息是独立的DOM元素，可直接让最后一条消息滚动到可视区域底部：

const lastMessage = document.querySelector('#messageContainer .message:last-child');
if (lastMessage) {
  lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
}

二、自定义滚动条样式 #

通过CSS伪元素定制滚动条，匹配示例图的样式效果（可根据需求调整颜色、圆角参数）：

#messageContainer {
  overflow-y: auto;
  /* 先设置容器基础样式，比如固定高度 */
  height: 500px;
}

/* 滚动条整体宽度 */
#messageContainer::-webkit-scrollbar {
  width: 8px;
}

/* 滚动条轨道样式 */
#messageContainer::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

/* 滚动条滑块样式 */
#messageContainer::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

/* 滑块hover状态 */
#messageContainer::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

若需兼容Firefox浏览器，补充以下属性：

#messageContainer {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

内容的提问来源于stack exchange，提问作者Anfique Hussain V