背景
在开发大型数据列表时，虚拟滚动（Virtual Scrolling）是一种常见的优化手段，它通过只渲染可见区域内的元素来减少 DOM 节点的数量，从而提升性能。然而，虚拟滚动在实际应用中可能会遇到“白屏”问题，即用户在快速滚动时，页面出现短暂的空白区域。本文将介绍如何通过引入代理滚动条来解决这一问题。
问题分析
虚拟滚动的核心思想是根据滚动位置动态计算并渲染可见区域内的元素。然而，当用户快速滚动时，浏览器可能无法及时渲染新的元素，导致页面出现白屏。这种现象在数据量较大或滚动速度较快时尤为明显。
解决方案
为了解决白屏问题，我们可以引入一个代理滚动条（Proxy Scrollbar）。代理滚动条的作用是监听用户的滚动行为，并将滚动事件同步到主滚动条上。通过这种方式，我们可以确保主滚动条的滚动行为更加平滑，减少白屏现象的发生。
- 使用浏览器限制下CPU性能，方便测试
- 左侧为虚拟列表本身的滚动条，滚动过程中出现空白区域。右侧为代理滚动条，滚动正常。
后续优化
- 使用滚动滚动时也会出现白屏现象。这时候可以隐藏原本的滚动条，使用wheel事件替代原本的滚动事件。
- 使用节流函数避免频繁触发滚动条同步。
