JS实现滚动容器自动滚动到底部的完整方案

作者：渲染笔记

时间：2026-10-31

本文详细介绍如何在JavaScript中通过修改scrollTop属性使滚动容器默认显示底部内容，并提供React结合Ant Design组件的具体实现代码。涵盖CSS样式配置、DOM操作逻辑及常见应用场景，帮助开发者快速构建自动滚动的对话界面。

文章目录

核心代码

配置滚动行为使内容默认置于底部：

// 获取设置了滚动属性的div标签
const div = document.getElementById('conversationalDiv');
// 设置滚动的顶点坐标为滚动的总高度
div.scrollTop = div.scrollHeight;

应用场景

用例：构建对话框组件，初始状态显示最新交互记录

核心代码

React 框架下的实现方案：

import { Input } from 'antd';
import { useState } from 'react';

function() {
	const [loading, setLoading] = useState(false);
	// 创建 dt dd 标签
	const createTag = (type, innerHTML) => {
		const dl = document.getElementById('conversationalDl');
		const tag = document.createElement(type);
		// 添加标签内容
		tag.innerHTML = innerHTML;
		if (dl) {
			// 向dl插入标签
			dl.appendChild(tag);
		}
		const div = document.getElementById('conversationalDiv');
		if (div) {
			// 设置滚动到最底部
			div.scrollTop = div.scrollHeight;
		}
	};
	const onConversationalSearch = async (val) => {
		// 创建dt标签，表示用户输入的内容
		createTag('dt', val);
		setLoading(true);
		try {
			const data = await getText(val);
			// 测试数据：
			// const data = "I'm good, how are you?"
			// 创建dd标签，表示另一边输入的内容
			createTag('dd', data);
		} catch (error) {}
		setLoading(false);
	};
	return ( <>
		<div id = "conversationalDiv" className = {styles.conversationalDiv} >
			<dl id = "conversationalDl" / >
		</div> 
		<Input.Search 
			placeholder = "Your sentence here..."
			allowClear 
			enterButton = "Send"
			onSearch = {onConversationalSearch}
		/> 
	</>)
}

必要的CSS样式定义

.conversationalDiv {
  height: 256px;
  width: 100%;
  border: 1px solid #e5e7eb;
  overflow: auto;
}
.conversationalDiv dl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px;
}
.conversationalDiv dl dt {
  display: inline-block;
  background-color: #2563eb;
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.conversationalDiv dl dd {
  display: inline-block;
  background-color: #f9fafb;
  color: #000;
  padding: 8px 12px;
  border-radius: 20px;
  place-self: start;
  margin-bottom: 10px;
}