textarea上方叠加div实现文本高亮：滚动至边缘对齐失效问题

一、修复滚动对齐偏差 #

• 强制样式完全一致：确保textarea和overlay的字体（font-family、font-size、font-weight）、行高（line-height）、内边距（padding）、外边距（margin）、边框（border）、文本换行规则（white-space、word-wrap、overflow-wrap）完全相同，任何细微差异都会导致文本错位。同时给两者设置box-sizing: border-box，让内边距和边框不影响元素总尺寸。
• 实时同步滚动位置：监听textarea的scroll事件，将其滚动位置实时同步到overlay：

  const textarea = document.getElementById('target-textarea');
  const overlay = document.getElementById('text-overlay');
  
  textarea.addEventListener('scroll', () => {
    overlay.scrollTop = textarea.scrollTop;
    overlay.scrollLeft = textarea.scrollLeft;
  });
  

• 抵消滚动条宽度影响：部分浏览器中textarea的滚动条会占用内容宽度，导致overlay内容偏移。可以计算滚动条宽度后调整overlay的内边距：

  const scrollbarWidth = textarea.offsetWidth - textarea.clientWidth;
  overlay.style.paddingRight = `${scrollbarWidth}px`;
  

• 固定元素尺寸：将textarea的resize属性设为none，禁止用户拖拽改变尺寸；同时确保两者的width和height完全一致，避免动态尺寸变化导致错位。

二、在Overlay中显示文本光标 #

推荐采用透明textarea叠加方案，简单且兼容性好：

1. 将textarea设置为完全透明（opacity: 0），通过绝对定位与overlay完全重叠，确保两者尺寸、位置完全匹配。此时用户实际操作的是textarea，但看不到原文本，overlay显示高亮内容，光标会自然显示在正确位置（本质是textarea的光标，透过透明层呈现）。
2. 若需完全隐藏textarea（不占用视觉空间），可将其定位到视口外（position: absolute; left: -9999px），再通过以下步骤模拟光标：
   • 监听textarea的input、selectionchange事件，同步内容到overlay；
   • 创建模拟光标元素（如<span class="fake-cursor">|</span>），通过getBoundingClientRect()计算textarea光标位置，动态设置模拟光标的绝对定位；
   • 用CSS动画实现光标闪烁效果：

     .fake-cursor {
       position: absolute;
       width: 2px;
       background-color: #000;
       animation: blink 1s infinite;
     }
     @keyframes blink {
       0%, 50% { opacity: 1; }
       51%, 100% { opacity: 0; }
     }
     

   这种方案需要处理文本换行、滚动时的光标位置更新，逻辑较复杂，优先推荐透明textarea方案。

内容的提问来源于stack exchange，提问作者Tomáš Zato