如何实现带行号的可滚动编辑器并保持行号与文本行严格对齐-html教程-PHP中文网

如何实现带行号的可滚动编辑器并保持行号与文本行严格对齐

本文介绍一种基于 css grid 的轻量级解决方案，无需 javascript 动态计算偏移量，即可让行号区域与 textarea 内容自然同步滚动，彻底解决传统 flex + 定位方案中行号错位、滚动不同步的问题。

本文介绍一种基于 css grid 的轻量级解决方案，无需 javascript 动态计算偏移量，即可让行号区域与 textarea 内容自然同步滚动，彻底解决传统 flex + 定位方案中行号错位、滚动不同步的问题。

要构建一个视觉上精准对齐、滚动行为完全一致的带行号编辑器，关键在于放弃手动控制 .numbers 元素位置（如 top 偏移）的思路——这类方案极易因行高计算误差、滚动事件时机、textarea 内部渲染机制等原因导致错位，尤其在快速输入、粘贴多行或触底新增内容时表现异常。

✅ 正确解法是利用 CSS Grid 的隐式对齐能力：将 .numbers 和置于同一网格容器中，共享相同的行高（line-height）和垂直内边距，使浏览器原生将二者按行“对齐”为一组单元格。此时，滚动容器（.editor）的 overflow-y: auto 会同时作用于两个子元素，确保它们以完全相同的滚动偏移量移动。

以下是核心实现要点：

1. 使用 display: grid 替代 inline-flex

.editor {
  display: inline-grid;
  grid-template-columns: 3em auto; /* 固定宽度行号列 + 自适应文本列 */
  gap: 10px;
  line-height: 21px; /* 统一基准行高 */
  max-height: 250px;
  overflow-y: auto;
  background: #282a3a;
  border-radius: 2px;
}

⚠️ 注意：grid-template-columns 明确划分列宽，避免 flex 中 align-items 或 justify-content 引发的不可控对齐。

2. 移除所有手动定位逻辑

删除原代码中 numbers.style.top = offset + "px" 和高度动态设置。行号容器 .numbers 不再需要 position: sticky 或任何 top/transform 操作——它只需作为普通网格项存在：

.numbers {
  text-align: right;
  background: #333;
  padding-right: 5px;
  /* ❌ 删除：position: sticky; top: 0; */
}

3. 行号生成保持简洁（纯 CSS 计数器）

JavaScript 仅负责生成对应数量的占位符，样式由 CSS counter-increment 和 ::before 自动渲染：

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('');
}

配合 CSS：

.numbers span {
  counter-increment: linenumber;
}
.numbers span::before {
  content: counter(linenumber);
  display: block;
  color: #888;
}

4. textarea 样式优化

移除 overflow-y: hidden（交由父容器统一控制滚动）
背景设为 transparent，避免遮挡行号背景
统一 padding-top/padding-bottom（推荐通过 .editor > * 统一设置），确保每行文字基线对齐

.editor > * {
  padding-top: 10px;
  padding-bottom: 10px;
}
textarea {
  background: transparent;
  border: 0;
  color: #fff;
  outline: none;
  resize: none;
  padding-right: 10px;
}