如何为内容溢出的类终端控制台网站添加滚动功能

• 容器.fakeScreen设置了overflow: hidden，固定高度800px，当输出内容总高度超过容器高度时，超出部分会被直接裁剪，底部的输入框会被顶到可视区域外
• 输出区域.output没有设置高度限制和独立滚动规则，新增内容会持续撑高整体内容高度
• 缺少新增内容后自动滚动到最新输出位置的逻辑，就算加了滚动也不会自动定位到最新内容处
• 额外HTML语法问题：</script>标签后多了一个多余的</div>闭合标签，可能引发布局异常

1. 替换CSS代码 #

.fakeScreen {
  background-color: #282828;
  box-sizing: border-box;
  position: relative;
  width: 1500px;
  height: 800px;
  margin: 0 auto;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* 新增flex布局，拆分输出区和输入区 */
  display: flex;
  flex-direction: column;
}

.fakeScreen .output {
  width: 100%;
  color: #fff;
  font-size: 14pt;
  font-family: 'Roboto Mono', monospace;
  /* 输出区占满剩余高度，超出自动滚动 */
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 #282828;
}

/* 输入区固定底部，不参与弹性缩放 */
.fakeScreen .action {
  width: 100%;
  padding-top: 10px;
  flex-shrink: 0;
  color: #fff;
  font-size: 14pt;
  font-family: 'Roboto Mono', monospace;
}

.fakeScreen .input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14pt;
  font-family: 'Roboto Mono', monospace;
  width: calc(100% - 150px);
}

2. 新增JS自动滚动逻辑 #

在你每次往.output节点插入新的命令输出内容后，执行以下代码，确保始终显示最新输出：

const output = document.querySelector('.output')
output.scrollTop = output.scrollHeight

3. 修复HTML语法错误 #

删除</script>标签后面多余的</div>闭合标签。

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