一种页面虚拟滚动方法、装置及设备

摘要

本说明书实施例公开了页面虚拟滚动方法、装置及设备。方案包括：获取用户对显示界面上的滚动条的拖拽操作；确定所述拖拽操作的移动距离；控制所述滚动条移动所述移动距离；根据所述滚动条的位置确定对应所述滚动条显示的基准条目；根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；在所述显示界面上显示所述显示条目集合中的各条目。

权利要求

1.一种页面虚拟滚动方法，包括：获取用户对显示界面上的滚动条的拖拽操作；

确定所述拖拽操作的移动距离；

控制所述滚动条移动所述移动距离；

根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；所述确定显示条目集合，具体包括：根据所述显示界面的高度确定显示条目集合的基准数量；根据所述基准数量以及所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比，确定第一数量和第二数量，所述第一数量是在所述显示界面上位于所述基准条目上方的预估条目数量，所述第二数量是在所述显示界面上位于所述基准条目下方的预估条目数量，其中，所述显示条目集合包括所述第一数量对应的各条目、所述基准条目和所述第二数量对应的各条目；

在所述显示界面上显示所述显示条目集合中的各条目。

2.如权利要求1所述的方法，所述根据所述滚动条的位置确定对应所述滚动条显示的基准条目，具体包括：

确定所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比；

根据所述位置百分比确定对应所述滚动条显示的基准条目，其中，所述基准条目在总条目集合中的序列号与所述位置百分比相关，所述总条目集合包括所述显示界面内的全部可显示条目。

3.如权利要求2所述的方法，所述确定所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比，具体包括：确定所述滚动条的最大可滚动距离；

确定所述滚动条的位置坐标；

根据公式：位置百分比＝位置坐标/最大可滚动距离，计算得到所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比。

4.如权利要求3所述的方法，所述确定所述滚动条的位置坐标，具体包括：获取所述滚动条的坐标；

当所述坐标小于0时，确定所述滚动条的位置坐标为0；

当所述坐标大于所述最大可滚动距离时，确定所述滚动条的位置坐标为所述最大可滚动距离，其中，所述最大可滚动距离为所述总条目集合的预设高度与所述显示界面的高度的差值，所述总条目集合的预设高度为所述总条目集合的条目数量与单个条目的预设显示高度的乘积；

当所述坐标大于等于0且小于等于所述最大可滚动距离时，设置所述位置坐标为所述坐标。

5.如权利要求2所述的方法，所述根据所述位置百分比确定对应所述滚动条显示的基准条目，具体包括：

获取所述总条目集合的条目数量；

根据所述条目数量和所述位置百分比的乘积确定基准条目的序列号；

从所述总条目集合中确定与所述序列号对应的基准条目。

6.如权利要求1所述的方法，所述在所述显示界面上显示所述显示条目集合中的各条目，具体包括：

根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的坐标；

分别获取所述第一数量对应的各条目的高度和所述第二数量对应的各条目的高度；

根据所述基准条目的坐标以及所述第一数量对应的各条目的高度确定起始条目的坐标；

根据所述基准条目的坐标以及所述第二数量对应的各条目的高度确定结束条目的坐标；

根据所述起始条目的坐标和所述结束条目的坐标对所述显示条目中的条目进行渲染。

7.如权利要求6所述的方法，所述根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的坐标，具体包括：根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的偏移量；

根据所述滚动条的位置百分比、所述显示界面的高度、所述基准条目的高度和所述偏移量确定所述基准条目的顶部在所述显示界面的坐标。

8.如权利要求7所述的方法，所述基准条目的偏移量采用以下公式计算：其中，itemoffset表示基准条目的偏移量，scrollTopPtg表示位置百分比，itemHeight表示基准条目的高度，itemIndex表示基准条目在总条目集合中的序列号，total表示总条目集合的条目数量。

9.如权利要求7所述的方法，所述基准条目的顶部在所述显示界面的坐标采用以下公式计算：

relativeTop＝scrollTopPtg*clientHeight‑itemoffset；

其中，clientHeight表示所述显示界面的高度；relativeTop表示所述基准条目的顶部在所述显示界面的坐标。

10.如权利要求1所述的方法，在所述显示界面上显示所述显示条目集合中的各条目之后，所述方法还包括：

获取所述用户对所述显示界面内的条目的点击操作；

根据所述点击操作对所述显示界面内的条目进行调整；

根据调整后的所述显示界面内的条目调整所述滚动条的位置。

11.如权利要求10所述的方法，当所述点击操作为收起操作时，所述根据所述点击操作对所述显示界面内的条目进行调整，具体包括：确定所述收起操作对应的条目；

将所述收起操作对应的条目在所述显示界面内删除；

保持所述收起操作对应的条目上方的条目的位置不变，将所述收起操作对应的条目下方的条目向上移动所述收起操作对应的条目的高度，令与所述收起操作对应的条目相邻的两个条目相接。

12.如权利要求11所述的方法，所述根据调整后的所述显示界面内的条目调整所述滚动条的位置，具体包括：

更新总条目集合的条目数量，并根据更新后的条目数量确定更新后的最大可滚动距离；

确定第一条目的第一位置坐标，所述第一条目位于所述收起操作对应的条目上方，且与所述收起操作对应的条目相接；

获取所述滚动条的位置坐标；

根据所述位置坐标与变化高度的差值确定估计位置坐标，其中，所述变化高度为单位变化高度的倍数，所述变化高度＝上一次的变化高度+/‑单位变化高度，所述变化高度的初始值为0，所述单位变化高度是对所述滚动条的位置坐标每次可调节的最小高度；

根据所述估计位置坐标和更新后的最大可滚动距离确定所述第一条目的第二位置坐标；

确定令所述第一位置坐标与所述第二位置坐标的差值最小的第一估计位置坐标；

将所述滚动条调整到所述第一估计位置坐标对应的位置。

13.如权利要求10所述的方法，当所述点击操作为展开操作时，所述根据所述点击操作对所述显示界面内的条目进行调整，具体包括：确定所述展开操作对应的条目；

获取所述展开操作对应的插入条目；

将位于所述展开操作对应的条目下方的条目向下移动所述插入条目的高度；

将所述插入条目显示在所述展开操作对应的条目下方。

14.如权利要求13所述的方法，所述根据调整后的所述显示界面内的条目调整所述滚动条的位置，具体包括：

更新所述总条目集合的条目数量，并根据更新后的条目数量确定更新后的最大可滚动距离；

确定第二条目的第一位置坐标，所述第二条目为所述展开操作对应的条目；

获取所述滚动条的位置坐标；

将所述位置坐标与变化高度相加得到估计位置坐标，其中，所述变化高度为单位变化高度的倍数，所述变化高度＝上一次的变化高度+/‑单位变化高度，所述变化高度的初始值为0，所述单位变化高度是对所述滚动条的位置坐标每次可调节的最小高度；

根据所述估计位置坐标和更新后的最大可滚动距离确定所述第二条目的第二位置坐标；

确定令所述第一位置坐标与所述第二位置坐标的差值最小的第一估计位置坐标；

将所述滚动条调整到所述第一估计位置坐标对应的位置。

15.一种页面虚拟滚动装置，包括：拖拽操作获取模块，用于获取用户对显示界面上的滚动条的拖拽操作；

移动距离确定模块，用于确定所述拖拽操作的移动距离；

移动控制模块，用于控制所述滚动条移动所述移动距离；

基准条目确定模块，用于根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

显示条目集合确定模块，用于根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；所述确定显示条目集合，具体包括：根据所述显示界面的高度确定显示条目集合的基准数量；根据所述基准数量以及所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比，确定第一数量和第二数量，所述第一数量是在所述显示界面上位于所述基准条目上方的预估条目数量，所述第二数量是在所述显示界面上位于所述基准条目下方的预估条目数量，其中，所述显示条目集合包括所述第一数量对应的各条目、所述基准条目和所述第二数量对应的各条目；

条目显示模块，用于在所述显示界面上显示所述显示条目集合中的各条目。

16.一种页面虚拟滚动设备，包括：至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：获取用户对显示界面上的滚动条的拖拽操作；

确定所述拖拽操作的移动距离；

控制所述滚动条移动所述移动距离；

根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；所述确定显示条目集合，具体包括：根据所述显示界面的高度确定显示条目集合的基准数量；根据所述基准数量以及所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比，确定第一数量和第二数量，所述第一数量是在所述显示界面上位于所述基准条目上方的预估条目数量，所述第二数量是在所述显示界面上位于所述基准条目下方的预估条目数量，其中，所述显示条目集合包括所述第一数量对应的各条目、所述基准条目和所述第二数量对应的各条目；

在所述显示界面上显示所述显示条目集合中的各条目。

说明书

一种页面虚拟滚动方法、装置及设备

技术领域

[0001] 本申请涉及计算机技术领域，尤其涉及一种页面虚拟滚动方法、装置及设备。

背景技术

[0002] 现有技术中，为了解决前端大数据列表存在的渲染以及滚动卡顿的问题，往往采用虚拟滚动，以获得更好的性能。现有的虚拟滚动的方法是：为每个条目设置坐标属性，只
获取当前界面可以看到的条目的高度，在拖拽滚动条时，需要不断更新统计条目高度使得
总体高度也不断被更新，由于总体高度与滚动条的具体位置有关，总体高度变化后，相应的
滚动条的位置也会发生变化，这样就会导致滚动条与鼠标不同步的情况出现。

[0003] 需要提供更快速或者更可靠的方案。

发明内容

[0004] 有鉴于此，本申请实施例提供了一种页面虚拟滚动方法、装置及设备，用于提高用户体验。

[0005] 为解决上述技术问题，本说明书实施例是这样实现的：

[0006] 本说明书实施例提供的一种面虚拟滚动方法，包括：

[0007] 获取用户对显示界面上的滚动条的拖拽操作；

[0008] 确定所述拖拽操作的移动距离；

[0009] 控制所述滚动条移动所述移动距离；

[0010] 根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

[0011] 根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；

[0012] 在所述显示界面上显示所述显示条目集合中的各条目。

[0013] 本说明书实施例提供的一种面虚拟滚动装置，包括：

[0014] 拖拽操作获取模块，用于获取用户对显示界面上的滚动条的拖拽操作；

[0015] 移动距离确定模块，用于确定所述拖拽操作的移动距离；

[0016] 移动控制模块，用于控制所述滚动条移动所述移动距离；

[0017] 基准条目确定模块，用于根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

[0018] 显示条目集合确定模块，用于根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；

[0019] 条目显示模块，用于在所述显示界面上显示所述显示条目集合中的各条目

[0020] 本说明书实施例提供的一种面虚拟滚动设备，包括：

[0021] 至少一个处理器；以及，

[0022] 与所述至少一个处理器通信连接的存储器；其中，

[0023] 所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

[0024] 获取用户对显示界面上的滚动条的拖拽操作；

[0025] 确定所述拖拽操作的移动距离；

[0026] 控制所述滚动条移动所述移动距离；

[0027] 根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

[0028] 根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；

[0029] 在所述显示界面上显示所述显示条目集合中的各条目。

[0030] 本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

[0031] 本方案根据滚动条位置确定对应滚动条位置显示的基准条目，然后再确定显示界面上的其他条目。相对于现有技术中的虚拟滚动，先由浏览器原生算法算出条目的位置，然
后再根据条目的位置修正滚动条的位置，本方案是根据滚动条的位置来确定条目的位置，
因此滚动条的位置不会随着条目的高度的更新而改变，从而可以保证光标和滚动条同步，
提高了用户体验。

附图说明

[0032] 此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

[0033] 图1为本说明书实施例提供的一种页面虚拟滚动方法的流程示意图；

[0034] 图2为本说明书实施例提供的页面显示界面的结构示意图；

[0035] 图3a为本说明书实施例提供的一种基准条目的偏移量的示意图；

[0036] 图3b为本说明书实施例提供的另一种基准条目的偏移量的示意图；

[0037] 图4为采用本说明书实施例提供的方法得到的条目渲染图；

[0038] 图5为现有的虚拟滚动方法中的条目的数据存储示意图；

[0039] 图6为现有的虚拟滚动方法的条目收起操作的展示效果；

[0040] 图7为本说明书实施例提供的动画操作为收起操作时的动画展示效果图；

[0041] 图8为本说明书实施例提供的对应于图1的一种页面虚拟滚动装置的结构示意图；

[0042] 图9为本说明书实施例提供的对应于图1的一种页面虚拟滚动设备的结构示意图。

具体实施方式

[0043] 为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一
部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做
出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

[0044] 大数据列表由于数据量巨大，为了节省服务器资源，往往采用虚拟滚动的方式进行展示，即虚拟列表的方式。虚拟列表即只渲染可视区域的数据，使得在列表数据庞大的情
况下，只显示可视区域的数据，这样能大量减少渲染量，使得列表能够流畅地无限滚动。

[0045] 现有的虚拟滚动的方法是为每个条目设置坐标属性，而且只能获取曾经出现在界面可见区域的条目的高度，对于剩余的条目的高度是采取估计值进行计算的，因此，列表条
目的总高度就会随着可见区域内的条目的变化而不断被更新。而滚动条的位置是根据当前
对于滚动条显示的条目的坐标占整个列表条目的总高度的比例来确定的。因此，滚动条的
位置与列表条目的总高度密切相关，如果列表条目的总高度变化了，滚动条的位置也就会
变化。因此，滚动条的位置就会发生抖动，从而与鼠标位置不同步。

[0046] 从上述分析可知，之所以会出现滚动条的位置与鼠标位置不同步的情况，是因为滚动条的位置与列表条目的总高度这一变量相关，如果要解决滚动条的位置与鼠标位置不
同步的问题，就需要找到一种滚动条的位置不受列表条目的总高度这一变量影响的办法。
为了解决这一问题，本说明书实施例提供了一种新的虚拟滚动的方法，将滚动条的位置与
条目在列表条目集合中的序列相关联，在列表条目集合固定的情况下，条目在列表条目集
合中的序列号就是固定的，因此，滚动条的位置不会随着列表条目的总高度的更新而发生
变化，从而能够保证滚动条与鼠标的位置保持一致。

[0047] 以下结合附图，详细说明本申请各实施例提供的技术方案。

[0048] 图1为本说明书实施例提供的一种页面虚拟滚动方法的流程示意图。从程序角度而言，流程的执行主体可以为搭载于应用服务器的程序或应用客户端。

[0049] 如图1所示，该流程可以包括以下步骤：

[0050] 步骤102：获取用户对显示界面上的滚动条的拖拽操作。

[0051] 在本说明书的一个或多个实施例中，显示界面可以是一个浏览器网页的显示界面，也可以是一个书籍目录的显示界面。此处的显示界面需要满足两个条件，一个条件是显
示界面内的数据以条目的形式显示，另一个条件是显示界面上设置有滚动条，而且滚动条
的位置与显示界面内显示的数据相关。

[0052] 显示界面的高度可以根据需要任意设置，但是，无论怎样设置都不可能将所有的条目数据全部展示出来。用户为了看到自己需要的数据，就需要对滚动条进行拖拽操作，以
使显示界面的可见区域的数据为用户需要看到的数据。

[0053] 对滚动条的拖拽操作可以理解为滚动条跟随鼠标移动的操作。

[0054] 步骤104：确定所述拖拽操作的移动距离。

[0055] 在本说明书的一个或多个实施例中，拖拽操作的移动距离可以理解为鼠标的移动距离。移动距离的计算方式可以是鼠标在客户端显示屏上移动的直观距离，也可以是鼠标
在相对坐标系中移动的相对距离。

[0056] 步骤106：控制所述滚动条移动所述移动距离。

[0057] 在本说明书的一个或多个实施例中，鼠标移动多长的距离，就控制滚动条移动相同的距离，这样就可以保证鼠标和滚动条处于同步的状态。

[0058] 步骤108：根据所述滚动条的位置确定对应所述滚动条显示的基准条目。

[0059] 在本说明书的一个或多个实施例中，在滚动条的位置确定了之后，就可以根据滚动条的位置来确定显示界面内的条目。基准条目是对应滚动条位置显示的条目，滚动条的
位置决定基准条目的位置以及基准条目的具体内容。

[0060] 本方案可以根据滚动条的位置确定基准条目是总条目集合中的哪一个，然后再确定基准条目的具体显示位置。基准条目确定了，其上方和下方需要显示的条目也就可以确
定了。

[0061] 本实施例中滚动条的位置确定以后就不会再改变，不会出现滚动条的位置进行抖动的情况。

[0062] 步骤110：根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目。

[0063] 显示界面的高度是一定的，各个条目也有高度，确定了基准条目的位置，就可以获取基准条目前后的条目以及各个条目的高度，从而确定在显示界面上显示的条目是哪些，
即显示条目集合。显示条目集合中的各条目的顺序与其在内存中的存储顺序是一致的。即
总列表条目集合中的条目的排列顺序是不变的。

[0064] 步骤112：在所述显示界面上显示所述显示条目集合中的各条目。

[0065] 在确定了显示条目集合之后，就可以按照显示条目集合中原来的排列顺序在显示界面上进行显示。

[0066] 图1中的方法，通过滚动条位置确定对应滚动条位置显示的基准条目，然后再确定显示界面上的其他条目。相对于现有技术中的虚拟滚动，先由浏览器原生算法算出条目的
位置，然后再根据条目的位置修正滚动条的位置，本方案是根据滚动条的位置来确定条目
的位置，因此滚动条的位置不会随着条目的高度的更新而改变，从而可以保证光标和滚动
条同步，从而提高用户体验。

[0067] 基于图1的方法，本说明书实施例还提供了该方法的一些具体实施方式，下面进行说明。

[0068] 在本说明书的一个或者多个实施例中，所述根据所述滚动条的位置确定对应所述滚动条显示的基准条目，具体包括：

[0069] 确定所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比；

[0070] 根据所述位置百分比确定对应所述滚动条显示的基准条目，其中，所述基准条目在总条目集合中的序列号与所述位置百分比相关，所述总条目集合包括所述显示界面内的
全部可显示条目。

[0071] 本实施例提供了一种根据滚动条的位置确定基准条目的实施方式。将滚动条的位置百分比与每个条目在总条目集合中序列号相关，确定了滚动条的位置百分比，就可以确
定基准条目的序列号，进而可以确定基准条目的其他信息。

[0072] 例如，滚动条的位置百分比为55.3％，那么总条目集合中序列号占总条目数量为55.3％的条目即为基准条目。如，总条目集合中的条目数量为1000，则序列号为553的条目
即为基准条目。

[0073] 在一些具体的应用场景中，可能不能做到滚动条的位置百分比与条目的序列百分比完全一致，那么可以选择与滚动条的位置百分比最接近的序列百分比对应的条目。如，总
条目集合中的条目数量为100，那么与55.3％最接近的序列号为56的条目，序列比分比为
56.0％。

[0074] 在本说明书的一个或者多个实施例中，所述确定所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比，具体包括：

[0075] 确定所述滚动条的最大可滚动距离；

[0076] 确定所述滚动条的位置坐标；

[0077] 根据公式：位置百分比＝位置坐标/最大可滚动距离，计算得到所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比。

[0078] 确定滚动条的位置百分比的方法可以根据公式：位置百分比＝位置坐标/最大可滚动距离进行计算。下面提供了两种方法：

[0079] 第一种方法，滚动条的最大可滚动距离可以根据显示界面内滚动条可以滑动的最大长度来设置，即滑轨的高度，而滚动条的位置高度也可以直接获取，因此可以根据两者直
接计算位置百分比。

[0080] 第二种方法，滚动条的最大可滚动距离可以设置为总条目集合的预设高度与显示界面的高度的差值。如图2所示，由于显示界面在滚动条不滚动的时候，也可以显示部分条
目，因此，在设置滚动条的最大可滚动距离的时候，要将显示界面的高度减去。总条目集合
的预设高度为根据条目数量和每个条目的预设高度的乘积来确定。由于每个条目的高度不
相同，且每个条目的高度又不能提前获取，因此需要预设一个高度。预设高度可以是各条目
高度的最小值，也可以是各条目高度的最大值，还可以是各条目高度的中间值。本方法就是
将滚动条滑轨的高度设置为总条目集合的预设高度与显示界面的高度的差值，然后在这个
坐标系中获取滚动条的坐标，就可以计算位置百分比。

[0081] 在本说明书的一个或者多个实施例中，所述确定所述滚动条的位置坐标，具体包括：

[0082] 获取所述滚动条的坐标；

[0083] 当所述坐标小于0时，确定所述滚动条的位置坐标为0；

[0084] 当所述坐标大于所述最大可滚动距离时，确定所述滚动条的位置坐标为所述最大可滚动距离，其中，所述最大可滚动距离为所述总条目集合的预设高度与所述显示界面的
高度的差值，所述总条目集合的预设高度为所述总条目集合的条目数量与单个条目的预设
显示高度的乘积；

[0085] 当所述坐标大于等于0且小于等于所述最大可滚动距离时，设置所述位置坐标为所述坐标。

[0086] 针对上述第二种情况，滚动条的位置坐标最小为0，最大为最大可滚动距离，为了取消ISO系统中弹力效果影响计算值，在获取滚动条的位置坐标时，如果获得坐标值小于0，
那么计算的位置百分比就是负数，显然这是不对的，因此就需要将滚动条的位置坐标重新
设置为0。同理，如果滚动条的坐标大于最大可滚动距离，那么位置百分比将大于1，此时也
是不成立的，因此，需要将滚动条的坐标调整为最大可滚动距离。

[0087] 在本说明书的一个或者多个实施例中，所述根据所述位置百分比确定对应所述滚动条显示的基准条目，具体包括：

[0088] 获取所述总条目集合的条目数量；

[0089] 根据所述条目数量和所述位置百分比的乘积确定基准条目的序列号；

[0090] 从所述总条目集合中确定与所述序列号对应的基准条目。

[0091] 在本实施例中，确定了滚动条的位置百分比之后，可以根据总条目集合的条目数量与位置百分比确定基准条目的序列号，如果位置百分比为37.25％，那么1000*37.25％＝
372.5。那么，基准条目的序列号为373。即，当序列号出现小数时，要向下取整，即取大于小
数的最小整数。

[0092] 在本说明书的一个或者多个实施例中，所述根据所述基准条目和所述显示界面的高度确定显示条目集合，具体包括：

[0093] 根据所述显示界面的高度确定显示条目集合的基准数量；

[0094] 根据所述位置百分比和所述基准数量确定第一数量和第二数量，所述第一数量是在所述显示界面上位于所述基准条目上方的预估条目数量，所述第二数量是在所述显示界
面上位于所述基准条目下方的预估条目数量，其中，所述显示条目集合包括所述第一数量
对应的各条目、所述基准条目和所述第二数量对应的各条目。

[0095] 显示界面的高度是一定值，各条目的预设高度也是知道的，就可以根据公式：基准数量＝显示界面的高度/各条目的预设高度来计算基准数量，若基准数量出现小数，则可以
直接取整数部分的数字。基准数量只是一个显示界面能够显示条目的最小数量的估计值，
可以认为是划定一个大的范围，其具体的数量还需要再进行修正。

[0096] 假设显示界面的高度为100，各条目的预设高度为20，那么基准数量为5。

[0097] 可以采用公式：第一数量＝基准数量*位置百分比计算第一数量，若乘积出现小数，则取整数部分。如果基准数量是5，位置百分比为37.25％，那么第一数量为1。

[0098] 采用公式：第二数量＝基准数量*(1‑位置百分比)计算第二属性，同理，如果乘积出现小数，也取整数部分。如果基准数量是5，位置百分比为37.25％，那么第二数量为3。

[0099] 在本说明书的一个或者多个实施例中，所述在所述显示界面上显示所述显示条目集合中的各条目，具体包括：

[0100] 根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的坐标。

[0101] 基准条目是一个具有一定高度的条目，因此在显示界面上对应滚动条位置显示的时候，需要确定基准条目的具体显示位置，如，基准条目的顶部坐标或者底部坐标，知道了
其中一项也就确定了基准条目的具体显示位置。

[0102] 在本说明书的一个或者多个实施例中，可以采用基准条目的偏移量来表示基准条目的显示位置。图3a和图3b分别表示了基准条目为同一个，但是偏移量不同的两个情况的
显示示意图。

[0103] 为了更清楚的说明不同偏移量对显示的影响，本方案提高了基准条目的偏移量的计算方案，具体公式如下所示：

[0104]

[0105] 其中，itemoffset表示基准条目的偏移量，scrollTopPtg表示位置百分比，itemHeight表示基准条目的高度，itemIndex表示基准条目在总条目集合中的序列号，
total表示总条目集合的条目数量，itemTopPtg和itemBottomPtg为中间量。

[0106] 假设scrollTopPtg为37.25％，total为1000，那么基准条目的序列号itemIndex为373，那么itemTopPtg为37.3％，itemBottomPtg为37.4％，如果itemHeight为20，那么
itemoffset为‑10。

[0107] 确定了基准条目的偏移量之后，就可以确定基准条目的坐标，以顶部坐标itemTop为例，滚动条的坐标是知道的，就可以确定基准条目的坐标。

[0108] 在本说明书的一个或者多个实施例中，所述根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的坐标，具体包括：

[0109] 根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的偏移量；

[0110] 根据所述滚动条的位置百分比、所述显示界面的高度、所述基准条目的高度和所述偏移量确定所述基准条目的顶部在所述显示界面的坐标。

[0111] 按照上述说明，首先可以计算基准条目相对于显示界面的坐标，设显示界面的高度为100，顶部坐标为0，底部坐标为100，那么基准条目相对于显示界面的坐标可以采用以
下公式进行计算：

[0112] relativeTop＝scrollTopPtg*clientHeight‑itemoffset                 (2)

[0113] 将scrollTopPtg为37.25％，clientHeight为100，itemoffset为‑10，代入上面的公式可得，relativeTop为47。

[0114] 在本说明书的一个或者多个实施例中，所述基准条目的顶部在所述显示界面的坐标采用以下公式计算：

[0115] 分别获取所述第一数量对应的各条目的高度和所述第二数量对应的各条目的高度；

[0116] 如果第一数量为1，则从数据库中取序列号为372的条目，获取其高度为25。第二数量为3，则从数据库中获取序列号为374、375、376的条目，其高度分别为25、27和23。

[0117] 根据所述基准条目的坐标以及所述第一数量对应的各条目的高度确定起始条目的坐标。

[0118] 延续上例，那么序列号为372的条目即为起始条目，其相对坐标值(顶部坐标)为47‑25＝22。可知，序列号为372的条目并不是起始条目，继续从数据库中获取序列号为371
的条目，其高度为25，计算得到序列号为371的条目的相对坐标值(顶部坐标)为‑3。可以确
定序列号为371的条目为起始条目，且起始条目的顶部有部分内容是不能显示出来的。

[0119] 根据所述基准条目的坐标以及所述第二数量对应的各条目的高度确定结束条目的坐标。

[0120] 那么序列号为375的条目的顶部相对坐标值为47+20+25＝92，那么序列号为376的条目的顶部相对坐标值为47+20+25+27＝119，可以确定，序列号为375的条目为结束条目。
此时，序列号为375的条目就可以作为备选条目，当发生收起目的的动画操作时，如收缩序
列号为375的条目后，就可以将序列号为376的条目在显示界面上进行显示。

[0121] 根据所述起始条目的坐标和所述结束条目的坐标对所述显示条目中的条目进行渲染。

[0122] 在进行具体渲染的时候，还需要将相对坐标值还原为原始坐标值，才可以对相应的条目进行渲染。此时要在相对坐标值的基础上加上滚动条的坐标。假设，滚动条的坐标值
为7412，对应于基准条目的相对坐标为47。需要渲染的相对坐标范围为0‑100，那么需要渲
染的原始坐标范围为7365‑7465。具体渲染后的条目如图4所示。

[0123] 现有的虚拟滚动方法，由于每个条目设置坐标信息(如图5所示)，即使将某个条目删除或者增加(动画操作)，也不会影响其他条目，因此不会改变显示界面的原来的显示布
局。图6为现有的虚拟滚动方法的条目收起操作的展示效果。如图6所示，以收起操作为例，
当第二个条目被点击操作收起之后，在原来显示第二条目的位置将会是空白，而不会达到
收起操作的目的。因此，现有页面虚拟方法并不支持对条目的动画操作。

[0124] 针对上述问题，由于本说明书实施例提供的方案通过双坐标系，根据容器相对坐标以及虚拟坐标。将滚动条坐标转成纯数学的条目位置占比，实现将条目高度与滚动条坐
标脱离。因而可以实现动画效果时，只需要设置起始可见节点的坐标，让后续节点使用浏览
器原生布局方式实现，从而实现动画自适应。

[0125] 以下结合附图，详细说明本申请各实施例提供的技术方案。

[0126] 在所述显示界面上显示所述显示条目集合中的各条目之后，所述方法还包括：

[0127] 获取所述用户对所述显示界面内的条目的点击操作；

[0128] 根据所述点击操作对所述显示界面内的条目进行调整；

[0129] 根据调整后的所述显示界面内的条目调整所述滚动条的位置。

[0130] 在本方案中，点击操作包括两种，一种是展开操作，一种是收起操作。在书籍的目录中，点击第一章的条目去查看下一级目录，就可以属于展开操作，将下一级目录收起，就
可以属于收起操作。上述两种操作由于可以呈现动画效果，因此，也可以叫做动画操作。其
中，在进行展开操作时，要暂停滚动条与条目的同步操作，直至展开操作完成。而收起操作
则不需要暂停滚动条与条目的同步操作。

[0131] 可以分别设置不同的按钮操作，或者点击操作的属性来区分展开操作和收起操作，如根据点击操作的不同位置来区分展开操作和收起操作。还可以采用其他方法，这里不
做具体限定。

[0132] 在动画操作中，由于存在条目的增加和减少，因此总条目集合的条目数量是会跟着改变的。因此，也会影响到滚动条的位置。因此，需要根据点击操作的类别重新确定滚动
条的位置。

[0133] 所述根据调整后的所述显示界面内的条目调整所述滚动条的位置，具体可以采用以下方法：

[0134] 1、记录当前基准条目的相对高度为`originLocatedItemRelativeTop`(见上虚拟滚动实现)。

[0135] 2、收集显示界面上当前可见条目的高度为`itemElementHeights`。

[0136] 3、选择动画节点的上一个条目录作为对比条目`compareIndex`，如果`compareIndex`为‑1，则改成0。之所以选择动画条目上方的条目作为对比条目，是因为动画
操作不会影响动画条目上方的条目的序列号，因此，在后续计算基准条目时，计算的序列号
是并不会受到动画操作的影响。

[0137] 4、从`itemIndex(基准条目)`起到`compareIndex(对比条目)`为止，根据`itemElementHeights(当前可见条目高度)`计算原对比条目的原位置`
originCompareItemTop`。

[0138] 5、从原滚动条坐标`scrollTop`开始，依次减少/添加1，得到新的滚动条坐标`newScrollTop`，遍历计算出新的`compareItemTop`(实现同虚拟滚动实现)

[0139] 6、将`compareItemTop`与`originCompareItemTop`相减得出差值`similarity`。

[0140] 7、选取`similarity`最小的`newScrollTop`设置`scrollTop`的值。

[0141] 当所述点击操作为收起操作时，所述根据所述点击操作对所述显示界面内的条目进行调整，具体包括：

[0142] 确定所述收起操作对应的条目；

[0143] 将所述收起操作对应的条目在所述显示界面内删除；

[0144] 保持所述收起操作对应的条目上方的条目的位置不变，将所述收起操作对应的条目下方的条目向上移动所述收起操作对应的条目的高度，令与所述收起操作对应的条目相
邻的两个条目相接。

[0145] 如图7所示，当点击操作为收起操作时，首先要根据点击操作确定需要收起的条目是哪一个或者哪几个，然后将其删除。由于采用了Flex布局，其下方的条目(结束条目)将会
自动向上移动，而不留下空隙。如果下方的条目整体上移动，在显示界面的下方就会有空
白，此时需要将预留条目在空白处进行显示。如此这样操作，就完成了条目的收起操作。

[0146] 当点击操作为收起操作时，所述根据调整后的所述显示界面内的条目调整所述滚动条的位置，具体包括：

[0147] 更新所述总条目集合的条目数量，并根据更新后的条目数量确定更新后的最大可滚动距离。

[0148] 假设原来的总条目集合的条目数量为1000，删除一个后为999，其最大可滚动距离为999*20‑100＝19880。

[0149] 确定第一条目的第一位置坐标，所述第一条目位于所述收起操作对应的条目上方，且与所述收起操作对应的条目相接。

[0150] 如图4所示，假设收起操作需要删除的是序列号为374的条目，那么序列号为373的条目即为第一条目，也即对比条目。由上述内容可知，序列号为373的相对坐标为47。

[0151] 获取所述滚动条的位置坐标。

[0152] 由上述内容可知，滚动条动画前的坐标为7412。

[0153] 根据所述位置坐标与变化高度的差值确定估计位置坐标，其中，所述变化高度为单位变化高度的倍数，所述变化高度＝上一次的变化高度+/‑单位变化高度，所述变化高度
的初始值为0，所述单位变化高度是对所述滚动条的位置坐标每次可调节的最小高度。

[0154] 即以滚动条动画前的坐标7412为中心，依次增加1，减少1，即得到的新坐标依次为：7413，7411，7414，7410，7415，7409，……。

[0155] 根据所述估计位置坐标和更新后的最大可滚动距离确定所述第一条目的第二位置坐标，步骤如下：

[0156] 根据所述估计位置坐标和更新后的最大可滚动距离确定所述滚动条的估计位置百分比。

[0157] 以估计位置坐标为7413为例，计算滚动条的位置百分比为7413/19880＝37.29％。

[0158] 根据所述估计位置百分比确定估计基准条目。

[0159] 999*37.29％＝372.5，则基准条目的序列号为373。

[0160] 根据所述估计基准条目的坐标确定所述第二条目的第二位置坐标。

[0161] 可以根据公式(1)，假设scrollTopPtg为37.29％，total为999，那么基准条目的序列号itemIndex为373，那么itemTopPtg为37.33％，itemBottomPtg为37.43％，如果
itemHeight为20，那么，可以计算基准条目的偏移量itemoffset为‑8。

[0162] 然后根据公式(2)relativeTop＝scrollTopPtg*clientHeight‑itemoffset计算基准条目的相对坐标。其中scrollTopPtg为37.29％，clientHeight为100，itemoffset为‑
8，代入上面的公式可得，基准条目的相对坐标relativeTop为45。

[0163] 同理，可以计算估计位置坐标为7414、7415等等的基准条目的相对坐标。

[0164] 确定令所述第一位置坐标与所述第二位置坐标的差值最小的第一估计位置坐标。

[0165] 由于，该例子中，基准条目即为第一条目(对比条目)，因此，只需将计算得到的基准条目的相对坐标与原来的坐标47做差值，找到最小差值对应的第一估计位置坐标就可
以。

[0166] 将所述滚动条调整到所述第一估计位置坐标对应的位置。

[0167] 然后将滚动条的位置调整到第一估计位置坐标，即实现了滚动条与条目同步。

[0168] 在本说明书的一个或者多个实施例中，当所述点击操作为展开操作时，所述根据所述点击操作对所述显示界面内的条目进行调整，具体包括：

[0169] 确定所述展开操作对应的条目；

[0170] 获取所述展开操作对应的插入条目；

[0171] 将位于所述展开操作对应的条目下方的条目向下移动所述插入条目的高度；

[0172] 将所述插入条目显示在所述展开操作对应的条目下方。

[0173] 展开操作，就是增加了条目的数量，因此，需要确定插入条目的具体信息，如个数，还有具体的高度。另外，还需要确定插入位置。然后将插入位置下方的条目向下移动插入条
目的总高度，然后再将插入条目在插入位置进行显示。

[0174] 另外，需要注意的是，当点击操作为展开操作时，要暂停滚动条与条目的同步操作，直至展开操作完成。

[0175] 当所述点击操作为展开操作时，所述根据调整后的所述显示界面内的条目调整所述滚动条的位置，具体包括：

[0176] 更新所述总条目集合的条目数量，并根据更新后的条目数量确定更新后的最大可滚动距离。

[0177] 与收起操作不同的是，展开操作对应的总条目集合的数量是增加的，因此，滚动条的最大可滚动距离的变大的。

[0178] 确定所述第二条目的第一位置坐标，所述第二条目为所述展开操作对应的条目。

[0179] 第二条目，即为对比条目，可以选择插入条目上方的条目作为对比条目。之所以选择动画条目上方的条目作为对比条目，是因为动画操作不会影响动画条目上方的条目的序
列号，因此，在后续计算基准条目时，计算的序列号是并不会受到动画操作的影响。

[0180] 获取所述滚动条的位置坐标；

[0181] 将所述位置坐标与变化高度相加得到估计位置坐标，其中，所述变化高度为单位变化高度的倍数，所述变化高度＝上一次的变化高度+/‑单位变化高度，所述变化高度的初
始值为0，所述单位变化高度是对所述滚动条的位置坐标每次可调节的最小高度；

[0182] 根据所述估计位置坐标和更新后的最大可滚动距离确定所述第二条目的第二位置坐标；

[0183] 确定令所述第一位置坐标与所述第二位置坐标的差值最小的第一估计位置坐标；

[0184] 将所述滚动条调整到所述第一估计位置坐标对应的位置。

[0185] 当所述点击操作为展开操作时，其滚动条的位置调整的方法与收起操作的方法基本一致，其区别仅仅在于对比条目的确定上。此实施例的第二条目即为对比条目，可以采用
动画条目的上一个条目作为对比条目。

[0186] 基于同样的思路，本说明书实施例还提供了上述方法对应的装置。图8为本说明书实施例提供的对应于图1的一种页面虚拟滚动装置的结构示意图。如图8所示，该装置可以
包括：

[0187] 拖拽操作获取模块801，用于获取用户对显示界面上的滚动条的拖拽操作；

[0188] 移动距离确定模块802，用于确定所述拖拽操作的移动距离；

[0189] 移动控制模块803，用于控制所述滚动条移动所述移动距离；

[0190] 基准条目确定模块804，用于根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

[0191] 显示条目集合确定模块805，用于根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；

[0192] 条目显示模块806，用于在所述显示界面上显示所述显示条目集合中的各条目。

[0193] 图8中的装置，通过滚动条位置确定对应滚动条位置显示的基准条目，然后再确定显示界面上的其他条目。相对于现有技术中的虚拟滚动，先由浏览器原生算法算出条目的
位置，然后再根据条目的位置修正滚动条的位置，本方案是根据滚动条的位置来确定条目
的位置，因此滚动条的位置不会随着条目的高度的更新而改变，从而可以保证光标和滚动
条同步，从而提高用户体验。

[0194] 在本说明书的一个或者多个实施例中，所述基准条目确定模块804，具体可以包括：

[0195] 位置百分比确定子模块，用于确定所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比；

[0196] 基准条目确定子模块，用于根据所述位置百分比确定对应所述滚动条显示的基准条目，其中，所述基准条目在总条目集合中的序列号与所述位置百分比相关，所述总条目集
合包括所述显示界面内的全部可显示条目。

[0197] 在本说明书的一个或者多个实施例中，所述位置百分比确定子模块，具体可以包括：

[0198] 最大可滚动距离确定单元，用于确定所述滚动条的最大可滚动距离；

[0199] 位置坐标确定单元，用于确定所述滚动条的位置坐标；

[0200] 位置百分比确定单元，用于根据公式：位置百分比＝位置坐标/最大可滚动距离，计算得到所述滚动条的位置占所述滚动条的最大可滚动距离的位置百分比。

[0201] 在本说明书的一个或者多个实施例中，所述位置坐标确定单元，具体可以包括：

[0202] 坐标获取子单元，用于获取所述滚动条的坐标；

[0203] 第一确定子单元，用于当所述坐标小于0时，确定所述滚动条的位置坐标为0；

[0204] 第二确定子单元，用于当所述坐标大于所述最大可滚动距离时，确定所述滚动条的位置坐标为所述最大可滚动距离，其中，所述最大可滚动距离为所述总条目集合的预设
高度与所述显示界面的高度的差值，所述总条目集合的预设高度为所述总条目集合的条目
数量与单个条目的预设显示高度的乘积；

[0205] 第三确定子单元，用于当所述坐标大于等于0且小于等于所述最大可滚动距离时，设置所述位置坐标为所述坐标。

[0206] 在本说明书的一个或者多个实施例中，所述基准条目确定子模块，具体可以包括：

[0207] 条目数量获取单元，用于获取所述总条目集合的条目数量；

[0208] 基准条目的序列号确定单元，用于根据所述条目数量和所述位置百分比的乘积确定基准条目的序列号；

[0209] 基准条目确定单元，用于从所述总条目集合中确定与所述序列号对应的基准条目。

[0210] 在本说明书的一个或者多个实施例中，所述显示条目集合确定模块805，具体可以包括：

[0211] 基准数量确定子模块，用于根据所述显示界面的高度确定显示条目集合的基准数量；

[0212] 第一数量和第二数量确定子模块，用于根据所述位置百分比和所述基准数量确定第一数量和第二数量，所述第一数量是在所述显示界面上位于所述基准条目上方的预估条
目数量，所述第二数量是在所述显示界面上位于所述基准条目下方的预估条目数量，其中，
所述显示条目集合包括所述第一数量对应的各条目、所述基准条目和所述第二数量对应的
各条目。

[0213] 在本说明书的一个或者多个实施例中，所述条目显示模块806，具体可以包括：

[0214] 基准条目的坐标确定子模块，用于根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的坐标；

[0215] 各条目的高度获取子模块，用于分别获取所述第一数量对应的各条目的高度和所述第二数量对应的各条目的高度；

[0216] 始条目的坐标确定子模块，用于根据所述基准条目的坐标以及所述第一数量对应的各条目的高度确定起始条目的坐标；

[0217] 结束条目的坐标确定子模块，用于根据所述基准条目的坐标以及所述第二数量对应的各条目的高度确定结束条目的坐标；

[0218] 渲染子模块，用于根据所述起始条目的坐标和所述结束条目的坐标对所述显示条目中的条目进行渲染。

[0219] 在本说明书的一个或者多个实施例中，所述基准条目的坐标确定子模块，具体可以包括：

[0220] 偏移量确定单元，用于根据所述基准条目的序列号、所述总条目集合的条目数量和所述位置百分比确定所述基准条目的偏移量；

[0221] 坐标确定单元，用于根据所述滚动条的位置百分比、所述显示界面的高度、所述基准条目的高度和所述偏移量确定所述基准条目的顶部在所述显示界面的坐标。

[0222] 在本说明书的一个或者多个实施例中，所述基准条目的偏移量采用以下公式计算：

[0223]

[0224] 其中，itemoffset表示基准条目的偏移量，scrollTopPtg表示位置百分比，itemHeight表示基准条目的高度，itemIndex表示基准条目在总条目集合中的序列号，
total表示总条目集合的条目数量。

[0225] 在本说明书的一个或者多个实施例中，所述基准条目的顶部在所述显示界面的坐标采用以下公式计算：

[0226] relativeTop＝scrollTopPtg*clientHeight‑itemoffset；

[0227] 其中，clientHeight表示所述显示界面的高度；relativeTop表示所述基准条目的顶部在所述显示界面的坐标。

[0228] 在本说明书的一个或者多个实施例中，所述方法还可以包括：

[0229] 点击操作获取模块，用于在所述显示界面上显示所述显示条目集合中的各条目之后，获取所述用户对所述显示界面内的条目的点击操作；

[0230] 条目调整模块，用于根据所述点击操作对所述显示界面内的条目进行调整；

[0231] 滚动条位置调整模块，用于根据调整后的所述显示界面内的条目调整所述滚动条的位置。

[0232] 在本说明书的一个或者多个实施例中，当所述点击操作为收起操作时，所述根据所述点击操作对所述显示界面内的条目进行调整，所述条目调整模块具体可以包括：

[0233] 第一确定子模块，用于确定所述收起操作对应的条目；

[0234] 删除子模块，用于将所述收起操作对应的条目在所述显示界面内删除；

[0235] 移动子模块，用于保持所述收起操作对应的条目上方的条目的位置不变，将所述收起操作对应的条目下方的条目向上移动所述收起操作对应的条目的高度，令与所述收起
操作对应的条目相邻的两个条目相接。

[0236] 在本说明书的一个或者多个实施例中，所述滚动条位置调整模块，具体可以包括：

[0237] 最大可滚动距离更新子模块，用于更新所述总条目集合的条目数量，并根据更新后的条目数量确定更新后的最大可滚动距离；

[0238] 第一位置坐标确定子模块，用于确定第一条目的第一位置坐标，所述第一条目位于所述收起操作对应的条目上方，且与所述收起操作对应的条目相接；

[0239] 位置坐标获取子模块，用于获取所述滚动条的位置坐标；

[0240] 估计位置坐标确定子模块，用于根据所述位置坐标与变化高度的差值确定估计位置坐标，其中，所述变化高度为单位变化高度的倍数，所述变化高度＝上一次的变化高度
+/‑单位变化高度，所述变化高度的初始值为0，所述单位变化高度是对所述滚动条的位置
坐标每次可调节的最小高度；

[0241] 第二位置坐标确定子模块，用于根据所述估计位置坐标和更新后的最大可滚动距离确定所述第一条目的第二位置坐标；

[0242] 第一估计位置坐标确定子模块，用于确定令所述第一位置坐标与所述第二位置坐标的差值最小的第一估计位置坐标；

[0243] 滚动条位置调整子模块，用于将所述滚动条调整到所述第一估计位置坐标对应的位置。

[0244] 在本说明书的一个或者多个实施例中，当所述点击操作为展开操作时，所述根据所述点击操作对所述显示界面内的条目进行调整，所述条目调整模块具体可以包括：

[0245] 第二确定子模块，用于确定所述展开操作对应的条目；

[0246] 插入条目获取子模块，用于获取所述展开操作对应的插入条目；

[0247] 移动子模块，用于将位于所述展开操作对应的条目下方的条目向下移动所述插入条目的高度；

[0248] 显示子模块，用于将所述插入条目显示在所述展开操作对应的条目下方。

[0249] 在本说明书的一个或者多个实施例中，所述根据调整后的所述显示界面内的条目调整所述滚动条的位置，具体包括：

[0250] 最大可滚动距离更新子模块，用于更新所述总条目集合的条目数量，并根据更新后的条目数量确定更新后的最大可滚动距离；

[0251] 第一位置坐标确定子模块，用于确定所述第二条目的第一位置坐标，所述第二条目为所述展开操作对应的条目；

[0252] 位置坐标获取子模块用于获取所述滚动条的位置坐标；

[0253] 估计位置坐标确定子模块，用于将所述位置坐标与变化高度相加得到估计位置坐标，其中，所述变化高度为单位变化高度的倍数，所述变化高度＝上一次的变化高度+/‑单
位变化高度，所述变化高度的初始值为0，所述单位变化高度是对所述滚动条的位置坐标每
次可调节的最小高度；

[0254] 第二位置坐标确定子模块，用于根据所述估计位置坐标和更新后的最大可滚动距离确定所述第二条目的第二位置坐标；

[0255] 第一估计位置坐标确定子模块，用于确定令所述第一位置坐标与所述第二位置坐标的差值最小的第一估计位置坐标；

[0256] 滚动条位置调整子模块，用于将所述滚动条调整到所述第一估计位置坐标对应的位置。

[0257] 基于同样的思路，本说明书实施例还提供了上述方法对应的设备。

[0258] 图9为本说明书实施例提供的对应于图1的一种页面虚拟滚动设备的结构示意图。如图9所示，设备900可以包括：

[0259] 至少一个处理器910；以及，

[0260] 与所述至少一个处理器通信连接的存储器930；其中，

[0261] 所述存储器930存储有可被所述至少一个处理器910执行的指令920，所述指令被所述至少一个处理器910执行，以使所述至少一个处理器910能够：

[0262] 获取用户对显示界面上的滚动条的拖拽操作；

[0263] 确定所述拖拽操作的移动距离；

[0264] 控制所述滚动条移动所述移动距离；

[0265] 根据所述滚动条的位置确定对应所述滚动条显示的基准条目；

[0266] 根据所述基准条目和所述显示界面的高度确定显示条目集合，所述显示条目集合包括所述基准条目；

[0267] 在所述显示界面上显示所述显示条目集合中的各条目。

[0268] 图9中的设备，通过滚动条位置确定对应滚动条位置显示的基准条目，然后再确定显示界面上的其他条目。相对于现有技术中的虚拟滚动，先由浏览器原生算法算出条目的
位置，然后再根据条目的位置修正滚动条的位置，本方案是根据滚动条的位置来确定条目
的位置，因此滚动条的位置不会随着条目的高度的更新而改变，从而可以保证光标和滚动
条同步，从而提高用户体验。

[0269] 在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然
而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。
设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因
此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件
(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable Gate 
Array，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员
自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作
专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻
辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，
而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言
(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL
(Advanced Boolean Expression Language)、AHDL(Altera Hardware Description 
Language)、Confluence、CUPL(Cornell UniversityProgramming Language)、HDCal、JHDL
(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(Ruby 
Hardware Description Language)等，目前最普遍使用的是VHDL(Very‑High‑Speed 
Integrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应
该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，
就可以很容易得到实现该逻辑方法流程的硬件电路。

[0270] 控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可
读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，
ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制
器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存
储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以
纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使
得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实
现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种
功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视
为既可以是实现方法的软件模块又可以是硬件部件内的结构。

[0271] 上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可
以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放
器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何
设备的组合。

[0272] 为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

[0273] 本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实
施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机
可用存储介质(包括但不限于磁盘存储器、CD‑ROM、光学存储器等)上实施的计算机程序产
品的形式。

[0274] 本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流
程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序
指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产
生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实
现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

[0275] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指
令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或
多个方框中指定的功能。

[0276] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或
其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一
个方框或多个方框中指定的功能的步骤。

[0277] 在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

[0278] 内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的
示例。

[0279] 计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。
计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动
态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除
可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD‑ROM)、
数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备
或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算
机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

[0280] 还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包
括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要
素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要
素的过程、方法、商品或者设备中还存在另外的相同要素。

[0281] 本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组
件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由
通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以
位于包括存储设备在内的本地和远程计算机存储介质中。

[0282] 本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实
施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例
的部分说明即可。

[0283] 以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同
替换、改进等，均应包含在本申请的权利要求范围之内。