如何在内容新增时将div元素内部的滚动条自动定位到底部？

先修正原代码的CSS错误 #

你提供的CSS存在两处语法问题，会导致滚动逻辑失效：

• 内层内容的选择器拼写错误，缺少ID选择器标识#，且多余了一个冒号
• 内层内容固定高度为400px，和外层滚动容器高度一致，内容无法撑开高度产生滚动溢出
  修正后的CSS如下：

#contentWrapper{
  border-color:crimson;
  border-style: solid;
  border-width: 2px;
  height: 400px;
  overflow: scroll;
  position:relative;
}
#content {
  /* 用最小高度保证初始状态和容器一致，内容增多时自动撑开 */
  min-height: 400px;
}

核心自动滚动实现逻辑 #

每次往#content节点追加新内容之后，主动设置外层滚动容器的滚动位置等于自身内容总高度即可，原生JS实现代码如下：

// 提前获取DOM节点，避免每次追加内容重复查询
const contentWrapper = document.getElementById('contentWrapper');
const content = document.getElementById('content');

// 示例：追加新内容的逻辑
function addNewContent(text) {
  const newParagraph = document.createElement('p');
  newParagraph.textContent = text;
  content.appendChild(newParagraph);

  // 追加内容完成后执行自动滚动到底部
  contentWrapper.scrollTop = contentWrapper.scrollHeight;
}

可选：平滑滚动效果 #

如果需要滚动过程有过渡动画，可以替换为scrollTo方法：

contentWrapper.scrollTo({
  top: contentWrapper.scrollHeight,
  behavior: 'smooth'
})

框架场景注意事项 #

如果你使用Vue/React等前端框架开发，需要保证滚动逻辑在DOM真实更新完成后执行：

• Vue 场景：在nextTick回调中执行滚动代码
• React 场景：在useEffect监听内容变化，或者setState的第二个回调参数中执行滚动代码

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