如何实现xterm.js自动调整高度适配内容且不显示滚动条

核心逻辑说明 #

官方FitAddon的设计目标是让终端尺寸适配外层容器的大小，和「容器尺寸跟随终端内容自动调整」的需求逻辑完全相反，无法直接实现效果。
核心实现路径：监听终端所有内容变更事件，直接读取缓冲区公开API拿到真实内容行数，反向动态调整终端rows配置与外层容器高度，同时通过配置+CSS双重保险隐藏滚动条，实现高度刚好容纳内容、无冗余空间的效果。

分步实现 #

• 初始化终端时提前关闭滚动相关配置

import { Terminal } from '@xterm/xterm';
// 初始化终端
const term = new Terminal({
  scrollback: 0, // 关闭滚动回溯，避免历史行被统计到内容高度里
  scrollSensitivity: 0,
  theme: {
    scrollbar: 'transparent' // 配置层面隐藏滚动条
  }
});
term.open(document.querySelector('#terminal-container'));

• 封装高度自适应方法，绑定内容变更事件
  xterm的term.buffer.active.length是公开API，直接返回当前活动缓冲区的真实内容总行数，不需要自行解析终端输出内容。

function adjustTerminalHeight() {
  // 读取当前内容实际占的行数
  const currentLineCount = term.buffer.active.length;
  // 调整终端行列数，列数保持当前值不变，行数匹配内容
  term.resize(term.cols, currentLineCount);
  // 同步外层容器高度，消除冗余空白
  const container = term.element.parentElement;
  container.style.height = `${term.element.offsetHeight}px`;
}

// 绑定所有可能触发内容高度变化的事件
term.onWriteParsed(adjustTerminalHeight); // 批量内容写入解析完成后触发
term.onLineFeed(adjustTerminalHeight); // 换行操作时即时触发
term.onResize(adjustTerminalHeight); // 列宽变化导致自动换行时重新计算

// 终端初始化完成后执行首次适配
term.onOpen(adjustTerminalHeight);

• 添加CSS兜底，彻底隐藏滚动条

.xterm-viewport {
  overflow: hidden !important;
  scrollbar-width: none;
}
.xterm-viewport::-webkit-scrollbar {
  display: none;
}

踩坑提示 #

• 不要给终端外层容器设置固定高度、min-height、max-height属性，否则会出现内容截断或者冗余空白
• 如果自定义了终端的padding、行高，计算容器高度时要补上对应的上下边距偏移，避免出现高度差
• 如果业务需要保留scrollback历史记录，不要直接取buffer.active.length，要计算当前视口内最后一个有内容行到光标所在行的偏移量作为实际行数
• 如果终端内容可能超过页面可视区域高度，可自行在adjustTerminalHeight方法里加最大高度限制，超过后再开启滚动条即可

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