如何实现行号与文本区域滚动完全对齐的可滚动编辑器-js教程-PHP中文网

如何实现行号与文本区域滚动完全对齐的可滚动编辑器

本文介绍一种无需 javascript 动态计算偏移量、仅靠 css grid 布局即可实现行号与 textarea 内容严格垂直对齐的轻量级方案，彻底解决传统 flex + position 模式下滚动错位的问题。

本文介绍一种无需 javascript 动态计算偏移量、仅靠 css grid 布局即可实现行号与 textarea 内容严格垂直对齐的轻量级方案，彻底解决传统 flex + position 模式下滚动错位的问题。

在构建类代码编辑器的 UI 时，一个常见痛点是：当使用 display: flex 布局将行号

与

并排放置后，一旦 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 位置干预。
以下是精简可靠的实现方案：
<pre class="brush:php;toolbar:false;"><div class="editor">
 <div class="numbers"></div>
 <textarea id="textarea" wrap="off"></textarea>
</div></pre>
<pre class="brush:php;toolbar:false;">.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;
}</pre>
<pre class="brush:php;toolbar:false;">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('').join('');
}

// 初始化 + 实时更新
textarea.addEventListener('input', updateRowNumbering); // 替代 onkeyup，支持粘贴、删除等所有输入
updateRowNumbering(); // 初始渲染</pre>
? 关键要点说明： 
<ul>
<li>✅ Grid 天然同步：.numbers 与 textarea 同属 .editor 网格项，父容器滚动时二者像素级联动，无 JS 计算误差； </li>
<li>✅ input 事件替代 keyup：覆盖粘贴（Ctrl+V）、剪切、回退、换行等全部文本变更场景； </li>
<li>✅ wrap="off" 防止自动换行干扰行数统计； </li>
<li>✅ font-variant-numeric: tabular-nums 保证行号数字等宽，避免因 10 vs 1 宽度差异导致右对齐偏移； </li>
<li>⚠️ 避免 position: sticky 或 absolute：Grid 布局下这些定位会破坏同步滚动机制； </li>
<li>⚠️ 勿手动设置 height 或 top：Grid 已由内容流自然撑开，强制设置反而引发错位。</li>
</ul>
该方案简洁、健壮、零依赖，适用于大多数轻量级代码展示或配置编辑场景。如需支持语法高亮、光标定位等高级功能，可在本结构基础上叠加 
<pre class="brush:php;toolbar:false;"><code> 或使用 Monaco Editor 等专业库，但基础对齐问题已通过 CSS Grid 彻底解决。</code></pre>