如何使用JavaScript将TEXTAREA滚动到指定实际行号？

当然可以做到，而且完全不用依赖像素计算——核心思路是通过字符位置定位来避开视觉换行的干扰，让浏览器自动处理滚动逻辑。

具体实现步骤 #

1. 计算目标行的起始字符索引
   先把textarea的内容按换行符分割成数组，累加前N-1行的长度（包括换行符本身），就能得到目标行的起始字符位置：

function getLineStartPos(textarea, targetLine) {
  const lines = textarea.value.split('\n');
  // 处理行号越界的情况
  if (targetLine < 1 || targetLine > lines.length) return -1;

  let startPos = 0;
  for (let i = 0; i < targetLine - 1; i++) {
    // 每行长度 + 换行符的长度（\n占1个字符）
    startPos += lines[i].length + 1;
  }
  return startPos;
}

2. 定位并触发滚动
   利用textarea的setSelectionRange方法，把光标定位到目标行的起始位置——浏览器会自动将该行滚动到可视区域内，而且不会破坏用户当前的输入状态：

function scrollToLine(textarea, targetLine) {
  const startPos = getLineStartPos(textarea, targetLine);
  if (startPos === -1) return;

  // 光标定位到目标行开头，触发自动滚动
  textarea.setSelectionRange(startPos, startPos);
  // 可选：如果textarea当前未聚焦，调用focus确保滚动生效
  textarea.focus();
}

使用示例 #

假设你的textarea元素ID是contentTextarea，要滚动到第8行：

const textarea = document.getElementById('contentTextarea');
scrollToLine(textarea, 8);

适配Windows换行符 #

如果文本里用的是\r\n（Windows风格换行），需要调整分割和长度计算逻辑：

function getLineStartPos(textarea, targetLine) {
  // 兼容\n和\r\n换行
  const lines = textarea.value.split(/\r?\n/);
  if (targetLine < 1 || targetLine > lines.length) return -1;

  let startPos = 0;
  for (let i = 0; i < targetLine - 1; i++) {
    // 原换行符的长度：如果是\r\n则加2，否则加1
    const lineBreakLength = textarea.value.slice(startPos + lines[i].length, startPos + lines[i].length + 2) === '\r\n' ? 2 : 1;
    startPos += lines[i].length + lineBreakLength;
  }
  return startPos;
}

这种方法完全基于文本的实际换行结构，不管视觉上怎么自动换行都能精准定位到目标行，比像素计算的方案可靠太多。

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