父容器滚动时虚拟列表的渲染索引计算问题

当把滚动事件移到包含图表和table的父容器后，table本身不再滚动（scrollTop始终为0），这时候得换个思路，用父容器的滚动位置结合table在父容器中的偏移来计算有效滚动距离，替代原来的table.scrollTop。

具体实现方法：

1. 获取父容器的滚动距离和table相对于父容器的顶部偏移
2. 计算实际作用在table内容上的有效滚动距离（只有当父滚动到table区域后，这个值才会大于0）
3. 用有效滚动距离计算渲染起始索引，同时做边界限制

示例代码：

const parentContainer = document.querySelector('.parent-scroll-container');
const tableElement = document.querySelector('.virtual-table');
const itemHeight = 50; // 假设每一行高度固定
const totalItems = 1000; // 总数据量
const visibleItemsCount = Math.ceil(parentContainer.clientHeight / itemHeight); // 可见项数量

parentContainer.addEventListener('scroll', () => {
  const parentScrollTop = parentContainer.scrollTop;
  
  // 计算table相对于父容器的顶部偏移
  const tableRect = tableElement.getBoundingClientRect();
  const parentRect = parentContainer.getBoundingClientRect();
  const tableOffsetTop = tableRect.top - parentRect.top;
  
  // 算出实际应该滚动table内容的距离，没到table区域时取0
  const effectiveScroll = Math.max(0, parentScrollTop - tableOffsetTop);
  
  // 计算起始索引，同时限制不超过最大允许值（避免超出数据范围）
  const maxPos = Math.max(0, totalItems - visibleItemsCount);
  const pos = Math.min(Math.floor(effectiveScroll / itemHeight), maxPos);
  
  // 更新虚拟列表渲染范围
  renderVirtualList(pos);
});

注意事项：

• 确保table元素不要设置overflow: auto或overflow: scroll，让它的内容随父容器滚动
• 如果父容器有定位（比如relative），用getBoundingClientRect计算的偏移依然准确，因为它是基于视口的相对位置
• 可见项数量visibleItemsCount需要根据父容器的高度和行高动态计算，确保渲染的内容能填满父容器可视区域

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