本文介绍一种无需 javascript 动态计算偏移量、仅靠 css grid 布局即可实现行号与 textarea 内容严格垂直对齐的轻量级方案，彻底解决传统 flex + position 模式下滚动错位的问题。
本文介绍一种无需 javascript 动态计算偏移量、仅靠 css grid 布局即可实现行号与 textarea 内容严格垂直对齐的轻量级方案，彻底解决传统 flex + position 模式下滚动错位的问题。
在构建类代码编辑器的 UI 时，一个常见痛点是：当使用 display: flex 布局将行号 <div> 与 <textarea> 并排放置后，一旦 textarea 内容超出容器高度并触发垂直滚动，行号往往无法同步滚动——要么固定不动、要么因手动设置 top 值而反向偏移（如原文中“行号随新增内容向下移动”），导致视觉错位。
根本原因在于：
Flex 容器中子元素默认独立滚动/定位，.numbers 若设为 position: sticky 或绝对定位，其滚动行为与 textarea 的原生滚动不同步；而通过 JS 手动计算 top 偏移（如 (num - 1) * 21px）不仅耦合行高、忽略滚动位置，还无法响应用户主动拖拽滚动条或鼠标滚轮操作，极易失准。
✅ 推荐解法：CSS Grid 布局 + 同步滚动容器
利用 display: grid 和 grid-template-columns 显式定义列宽，并让 .numbers 与 textarea 成为同一网格容器的直接子项。此时二者共享父容器的滚动上下文，只要父容器启用 overflow-y: auto，两个子元素便会天然同步滚动，无需任何 JS 位置干预。
以下是精简可靠的实现方案：
<div class="editor"> <div class="numbers"></div> <textarea id="textarea" wrap="off"></textarea> </div>
.editor {
display: inline-grid;
grid-template-columns: 3em auto; /* 行号列宽固定，文本区自适应 */
gap: 10px;
line-height: 21px;
background: #282a3a;
border-radius: 2px;
overflow-y: auto;
max-height: 250px;
}
.editor > * {
padding-top: 10px;
padding-bottom: 10px;
}
.numbers {
text-align: right;
background: #333;
padding-right: 5px;
user-select: none; /* 禁止选中行号 */
}
.numbers span {
counter-increment: linenumber;
}
.numbers span::before {
content: counter(linenumber);
display: block;
color: #888;
font-variant-numeric: tabular-nums; /* 确保数字等宽对齐 */
}
textarea {
line-height: 21px;
border: 0;
background: transparent;
color: #fff;
min-width: 500px;
outline: none;
resize: none;
padding-right: 10px;
font-family: Consolas, "Courier New", Courier, monospace;
}const textarea = document.getElementById('textarea');
function updateRowNumbering() {
const lineCount = textarea.value.split('\n').length;
const numbersEl = textarea.parentNode.querySelector('.numbers');
numbersEl.innerHTML = Array(lineCount).fill('<span></span>').join('');
}
// 初始化 + 实时更新
textarea.addEventListener('input', updateRowNumbering); // 替代 onkeyup，支持粘贴、删除等所有输入
updateRowNumbering(); // 初始渲染? 关键要点说明：
- ✅ Grid 天然同步：.numbers 与 textarea 同属 .editor 网格项，父容器滚动时二者像素级联动，无 JS 计算误差；
- ✅ input 事件替代 keyup：覆盖粘贴（Ctrl+V）、剪切、回退、换行等全部文本变更场景；
- ✅ wrap="off" 防止自动换行干扰行数统计；
- ✅ font-variant-numeric: tabular-nums 保证行号数字等宽，避免因 10 vs 1 宽度差异导致右对齐偏移；
- ⚠️ 避免 position: sticky 或 absolute：Grid 布局下这些定位会破坏同步滚动机制；
- ⚠️ 勿手动设置 height 或 top：Grid 已由内容流自然撑开，强制设置反而引发错位。
该方案简洁、健壮、零依赖，适用于大多数轻量级代码展示或配置编辑场景。如需支持语法高亮、光标定位等高级功能，可在本结构基础上叠加 <pre><code> 或使用 Monaco Editor 等专业库，但基础对齐问题已通过 CSS Grid 彻底解决。
