Virtual list中如何保持长距离滚动后高亮文本的选中状态

你遇到的高亮丢失问题，根因是把高亮状态绑定在了虚拟列表渲染的临时DOM节点上——虚拟列表会自动回收滚出可视区+缓冲区范围的DOM，节点被销毁或复用到其他行时，绑定在节点上的高亮class、样式、甚至原生选区Range都会直接失效，单纯调大buffer参数只是延后了DOM回收的时机，只要滚动距离足够长必然会复现问题。

参考GitHub Actions日志的实现逻辑，核心是把高亮状态和渲染层完全解耦，落地可以按以下步骤做：

• 搭建独立于DOM的全量高亮状态层
  所有用户操作产生的高亮标记，全部以结构化数据的形式存在和虚拟列表渲染逻辑无关的状态里，每条高亮记录至少要包含起始行索引、结束行索引两个核心字段；如果需要支持行内片段高亮，再补充行内起始字符偏移、结束字符偏移、高亮样式属性即可。这部分状态是全量存储的，和当前列表渲染了多少行、哪些DOM被回收没有任何关系。
• 行节点渲染时动态匹配高亮状态
  虚拟列表每次渲染可视区、缓冲区的行节点时，拿当前待渲染行的索引去全量高亮状态表里做匹配：只要当前行落在任意一条已存储的高亮区间内，就直接给当前渲染的行节点、对应行内文本片段加上高亮样式。哪怕这个DOM节点是刚被回收复用、或是刚创建的新节点，只要索引匹配就会自动带上高亮，完全不受DOM回收影响。
  不要依赖浏览器原生Selection Range存储用户选中的内容：原生Range是直接绑定DOM节点的，一旦对应的行DOM被虚拟列表回收，Range会直接指向错误的位置甚至失效。正确的做法是在用户完成选中操作（松开鼠标）的瞬间，立刻把当前原生选区转换成「行索引+字符偏移」的结构化数据存入状态层，再清空原生选区，完全用自定义样式渲染高亮效果。
• 兼容选中过程中的滚动场景
  如果需要支持用户按住鼠标拖动选择时、列表自动滚动跟随选区的交互，不要依赖原生选区的自动滚动能力，在列表滚动回调里实时计算当前选中的结构化起止位置，同步更新临时预览高亮状态，等用户松开鼠标确认选中后，再把这段区间固化到全量高亮状态中即可。

注意：虚拟列表的buffer参数仅用于优化快速滚动时的白屏问题，和高亮状态持久化没有关联，不需要为了保留高亮刻意调大buffer值，否则会大幅增加不必要的DOM节点数量，降低列表渲染性能。

核心逻辑的最简代码参考：

// 全量高亮状态，独立于渲染逻辑存储
const highlightStore = new Set([
  {
    id: 'mark_001',
    startLine: 327,
    endLine: 412,
    startOffset: 0, // 整行高亮时偏移设为0
    endOffset: Number.MAX_SAFE_INTEGER,
    bgColor: 'rgba(255, 215, 0, 0.25)'
  }
])

// 虚拟列表单行渲染函数（所有虚拟列表库逻辑通用）
function renderVirtualRow(rowIndex, rowContent, containerStyle) {
  // 匹配当前行命中的高亮规则
  const hitHighlight = Array.from(highlightStore).find(mark => 
    rowIndex >= mark.startLine && rowIndex <= mark.endLine
  )
  return `
    <div style="${containerStyle}" class="${hitHighlight ? 'row-highlight' : ''}">
      ${rowContent}
    </div>
  `
}

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