虚拟滚动

| 2024-07-11

虚拟滚动 (Virtual Scrolling) 笔记

1. 概念

列表元素过多时，只渲染可视区域的 DOM 节点，提高性能。

2. 关键点

容器固定高度
计算滚动 offset
只渲染可见数据
动态填充 padding/margin 模拟总高度

3. Vue 示例

<template>
  <div class="scroll-container" @scroll="onScroll">
    <div :style="{height: totalHeight + 'px'}">
      <div v-for="item in visibleData" :key="item.id"
           :style="{transform: 'translateY(' + offsetTop + 'px)'}">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>