本文介绍一种无需 javascript 动态计算偏移量、仅用 css grid 即可让行号与 textarea 内容完美对齐并同步滚动的专业方案，解决传统 flex + 定位方式中行号错位、滚动不同步等核心问题。

本文介绍一种无需 javascript 动态计算偏移量、仅用 css grid 即可让行号与 textarea 内容完美对齐并同步滚动的专业方案，解决传统 flex + 定位方式中行号错位、滚动不同步等核心问题。

在构建类代码编辑器的 UI 时，一个常见但易被低估的挑战是：如何让左侧行号（line numbers）始终与 textarea 中的每一行文本严格垂直对齐，且在滚动、增删行、自动换行等操作下保持同步？ 原始方案试图通过 top 偏移和手动计算行高来“模拟”对齐，但因 textarea 的滚动容器行为与绝对定位元素的脱离，导致行号反向漂移——这本质上是布局模型误用所致。

✅ 正确解法：使用 display: grid 替代 inline-flex，借助网格天然的行列对齐能力，让 .numbers 和 成为同一网格中的并列轨道（grid-template-columns: 3em auto），二者共享相同的滚动容器与行高基准。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 核心优势

• 零 JS 对齐逻辑：不再需要 numbers.style.top = offset + "px" 等脆弱计算；
• 原生滚动同步：.editor 作为统一滚动容器，.numbers 与 textarea 共享 scroll offset，行号自动跟随内容滚动；
• 响应式健壮：行高变化、字体缩放、动态内容更新均不影响对齐；
• 语义清晰：Grid 明确表达了“行号列 + 编辑区列”的二维结构关系。

✅ 实现要点

1. HTML 结构保持简洁：
   包裹两个直接子元素（.numbers 和 ）；<li> <strong>CSS 关键声明</strong>：<pre class="brush:php;toolbar:false;">.editor { display: inline-grid; grid-template-columns: 3em auto; /* 固定行号列宽，剩余给编辑区 */ gap: 10px; overflow-y: auto; /* 滚动由父容器统一控制 */ max-height: 250px; } .numbers, textarea { line-height: 21px; /* 必须一致！这是对齐的物理基础 */ padding-top: 10px; padding-bottom: 10px; }</pre> </li> <li> <strong>JavaScript 仅负责更新行号数量</strong>（非位置）：<pre class="brush:php;toolbar:false;">function updateRowNumbering() { const ta = document.querySelector('textarea'); const num = ta.value.split('\n').length; const numbers = ta.parentNode.querySelector('.numbers'); numbers.innerHTML = Array(num).fill('<span></span>').join(''); } // 绑定事件（推荐用 addEventListener 替代内联 onkeyup） document.querySelector('textarea').addEventListener('input', updateRowNumbering);</pre> </li> <h3>⚠️ 注意事项</h3> <ul> <li> <strong>禁用 textarea 自身滚动</strong>：textarea { overflow-y: hidden; }（已隐含在 Grid 布局中，但显式声明更安全）；</li> <li> <strong>避免设置 position: sticky 或 absolute</strong>：会破坏 Grid 的流式对齐；</li> <li> <strong>确保 line-height 在 .editor、.numbers、textarea 三者中完全一致</strong>（如均为 21px），否则视觉错位不可避免；</li> <li> <strong>行号生成使用 CSS 计数器</strong>（counter-increment + ::before），性能优于纯 JS 插入文本。</li> </ul> <h3>✅ 最终效果</h3> <p>无论用户在底部追加 100 行、快速滚动、还是粘贴大段代码，行号都会像“影子”一样精准附着于对应文本行左侧——无需计算、不依赖 scroll 事件监听、无重绘抖动。这是一种符合现代 CSS 布局哲学的优雅解法：<strong>用正确的工具（Grid）解决正确的问题（二维对齐），而非用复杂逻辑修补错误的抽象（Flex + 手动定位）。</strong></p>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！