如何用纯JavaScript实现div自动滚动到底部（用户上滚时停止）

方案一：基于flex-direction: column-reverse的实现 #

这种方案利用弹性布局反转内容顺序，让最新内容始终处于可视区域顶部，对应滚动条的初始位置。

完整代码

HTML：

<div id="data"></div>

CSS：

#data{
  display: flex; /* 必须添加，否则flex-direction不生效 */
  flex-direction: column-reverse;
  height: 300px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #ccc;
}

JavaScript：

const dataContainer = document.getElementById('data');
let isUserScrolled = false;

// 监听滚动事件，标记用户是否手动滚动
dataContainer.addEventListener('scroll', () => {
  // column-reverse布局下，scrollTop=0代表处于最新内容位置（底部）
  isUserScrolled = dataContainer.scrollTop !== 0;
});

// 定时添加内容
let addDataInterval = setInterval(() => {
  const newItem = document.createElement('div');
  newItem.textContent = "More data";
  dataContainer.appendChild(newItem);
  
  // 如果用户未手动滚动，自动回到最新内容位置
  if (!isUserScrolled) {
    dataContainer.scrollTop = 0;
  }
}, 1000);

方案二：常规布局实现（无需反转内容） #

如果不想用弹性布局反转内容，可采用常规滚动逻辑，直接将滚动条拉到底部。

完整代码

HTML：

<div id="data"></div>

CSS：

#data{
  height: 300px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #ccc;
}

JavaScript：

const dataContainer = document.getElementById('data');
let isUserScrolled = false;

// 监听滚动事件，判断用户是否离开底部
dataContainer.addEventListener('scroll', () => {
  // 计算是否处于底部（留1px误差避免滚动精度问题）
  const isAtBottom = dataContainer.scrollTop + dataContainer.clientHeight >= dataContainer.scrollHeight - 1;
  isUserScrolled = !isAtBottom;
});

// 定时添加内容
let addDataInterval = setInterval(() => {
  const newItem = document.createElement('div');
  newItem.textContent = "More data";
  dataContainer.appendChild(newItem);
  
  // 用户未手动滚动时，自动滚动到底部
  if (!isUserScrolled) {
    dataContainer.scrollTop = dataContainer.scrollHeight;
    // 也可以用scrollIntoView实现：newItem.scrollIntoView({ behavior: 'auto' });
  }
}, 1000);

关键逻辑说明 #

1. 状态标记：通过isUserScrolled变量记录用户是否手动滚动过，当用户将滚动条从底部移开时，标记为true。
2. 自动滚动触发条件：每次添加新内容后，仅当isUserScrolled为false时，才执行滚动操作，保证用户手动滚动后不会被强制拉回底部。
3. DOM操作优化：用appendChild代替innerHTML+=，避免重复解析整个容器的DOM结构，提升性能。

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