前言

具体思路

1. 页面结构，当然只需要一个DIV元素就可以。然后将手动生成DOM元素添加我们需要虚拟滚动的DOM元素中。

2. 代码结构，利用JS的Class来创建一个对象，然后对象里做操作方法。这样把dom和JS操作分开，有利于代码的维护。

3. 对象上属性的考虑需要哪些呢？
• 需要虚拟滚动监听的dom元素 element
• 需要虚拟滚动监听的dom的高度 height
• 虚拟滚动列表的每一行高度 rowHeight，用来计算需要加载多少个数据
• 新加载数据的个数 pageSize
• 页面滚动加载新的dom元素，那么dom渲染需要时间，为此加一个缓存区域，提前渲染出需要的dom元素
• 每一行渲染的回调函数 renderItem
• 加载更多的回调函数 loadMore 那么对应的html编写就是
目前主要一个对象需要这几个属性。对应代码的编写就如下
构造函数中传入需要的对象属性值，然后构造函数检验值的正确性，并赋值
这个时候来看看如何生成一个对象
赋值操作弄好之后，还需要再每次创建新对象的时候就创建一个dom元素来包裹渲染rowItem
还需要每次新建对象的的时候先渲染一批数据，然后还要再上面创建的包裹层中添加滚动监听。相当于虚拟dom的根节点。然后挂载到需要的dom节点上。
这里就遇到了2个函数一个初始化加载函数，渲染第一次渲染的数据，第二个是防抖函数用来处理滚动的性能，第三个就是每次滚动到指定位置就渲染的数据的渲染函数
最主要的函数操作是this.#toggleTopItems(direction); this.#toggleBottomItems(direction)这2个函数，他们主要就是替换消失在屏幕展示区域中的dom元素。是代码的核心。