滚动容器

数学原理

显示区域

• 这部分是实际显示当前的item的区域，如图亮色部分
• 滚动容器区域，这部分是用来处理当前的滚动容器大小的，如图灰色部分

坐标偏移处理

• 当前的公式会和坐标系的朝向有关，如果朝上朝下公式会有所不同，注意推导
• 确保滚动容器的左上角和显示容器的左上角对齐，这也是简单方便的

以滚动界面为整体的计算整体

• 以下公式和坐标轴的朝向没有关系的，通用的。

1.设当前的显示容器的宽度高度为(w_{content},h_{content}) 当前的滚动列表宽度高度为(w_{scollow},h_{scollow})
2.计算单一方向的偏移值，以竖直方向为例 \alpha = h_{scollow} - h_{content}} 这个\alpha则是对应的滚动的下边界了，也就是，当前的容器的滚动值\theta的区间在[0,\alpha]
3.检测鼠标点击，当鼠标点击的时候记录当前的鼠标值，然后移动，当松开的时候记录当前的鼠标值，算出鼠标偏移的值\beta,然后后面就直接设置为 \theta = max[0,min[\alpha,\theta - \beta]] 这个计算就是为了限制对应的区域，代码也就直接使用这个就行了 4.有了\theta$ 之后呢，则是进行相关的实际偏移处理了

以Item为单个字的偏移计算方式

• 以下公式需要注意，根据坐标轴的朝向更改对应的符号，这个是图上的坐标轴为例子。

1.获取当前每一个item的transform的position的值。
2.然后根据当前的滚动方向，以竖直方向为例，在他们的基础上，y_{item} = y_{item} + \theta 注意,需要记录当前的y_{item}初始值，每次运用都弄上去

虚拟列表

• 虚拟列表的实现不一样，上面是有边界的滚动，而虚拟列表是没有边界的，因此他的思路不是通过界面整体
• 而是通过item单个进行

显示区域

• 通上

虚拟区域

• 这部分是用来缓存item的，也就是在这里面的item会创建出来，但是不一定显示
• 以显示界面为中心，采用锚点的中心，更改宽度，宽度大小设置为 h_{item} * n * 2 n为上下item缓存的个数 2是为了上下同时拓展足够item的位置。

处理原理

1.定义如图的坐标系，创建对应的item出来，一般来说，上面的item是不创建先的，是往下走的，包括缓存item也需要创建出来
2.监听当前的鼠标变化，获取偏移值
3.然后根据当前的鼠标偏移值的，去将这个偏移值应用上去，之后呢就设置对应的偏移了，一般数据是往上走的，但是虚拟列表的item会这么处理，如果item超出上半部分，则回收，然后紧接着放在当前的列表最后的item +1 的位置，然后没有显示的则复用数据
4.如此不断循环