CN110221758B - 滚动条控制方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及功能优化技术，提供了一种滚动条控制方法、装置、计算机设备和存储介质。所述方法包括：监听滚动条控制触发事件；当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息；当所述滚动条控制触发事件为滚轮事件时，获取所述滚轮事件触发生成的滚动属性值，并根据所述滚动属性值确定滚动量和滚动方向；根据所述滚动量确定所述滚动条的位置移动量，并根据所述滚动方向确定所述滚动条的移动方向；根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息；按照所述移动方向将所述滚动条移动至所述目标位置信息对应的位置处。采用本方法能够提高滚动条的控制效率。

Description

滚动条控制方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种滚动条控制方法、装置、计算机设备和存储介质。

背景技术

随着计算机技术的发展，终端通常可以借助于浏览器访问服务器或云端，并将从服务器或云端获取到的各种信息以页面内容的形式通过浏览器展示给用户。当页面内容较多，以至于浏览器显示窗口不能一次性显示完所有的页面内容时，通常会将部分页面内容隐藏，并在浏览器中设置相应的滚动条，以便于用户通过移动滚动条来查看被隐藏的页面内容。

目前，通常是预先定义滚轮事件，并当用户通过滚动鼠标滚轮触发滚轮事件时，终端会获取鼠标滚轮滚动的坐标值deltaX和deltaY，进而根据所获取到的坐标值移动滚动条。然而，在特定框架(比如iview框架)下个别浏览器中没有定义delta(包括deltaX和deltaY)这个属性，因而终端在检测到滚轮事件时无法获取到鼠标滚轮滚动的坐标值deltaX和deltaY，从而无法根据坐标值确定滚动条移动前后的位置并根据位置变化移动滚动条，存在滚动条兼容性差的问题，进而降低了滚动条的控制效率。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高滚动条控制效率的滚动条控制方法、装置、计算机设备和存储介质。

一种滚动条控制方法，所述方法包括：

监听滚动条控制触发事件；

当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息；

当所述滚动条控制触发事件为滚轮事件时，获取所述滚轮事件触发生成的滚动属性值，并根据所述滚动属性值确定滚动量和滚动方向；

根据所述滚动量确定所述滚动条的位置移动量，并根据所述滚动方向确定所述滚动条的移动方向；

根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息；

按照所述移动方向将所述滚动条移动至所述目标位置信息对应的位置处。

在其中一个实施例中，所述根据所述滚动量确定所述滚动条的位置移动量，包括：

获取当前页面窗口高度；

根据所述当前页面窗口高度和所述滚动量，按照预设映射关系确定所述滚动条的位置移动量。

在其中一个实施例中，所述当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息之后，所述方法还包括：

当所述滚动条控制触发事件为拖动事件时，调用所述拖动事件所绑定的函数来获取所述滚动条的位置移动量和移动方向，并

跳转至所述根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息的步骤继续执行。

在其中一个实施例中，所述方法还包括：

实时检测页面刷新触发操作；

当检测到所述页面刷新触发操作时，记录滚动条当前相对于页面窗口的位置信息，并执行页面刷新操作；

当所述页面刷新操作执行完毕时，按照所述位置信息在刷新后的页面窗口中展示所述滚动条，并根据所述位置信息将所述页面窗口中当前展示的页面，定位到执行页面刷新操作之前的浏览位置。

在其中一个实施例中，所述方法还包括：

实时检测页面窗口中当前展示的页面对应的页面内容高度；

当检测到所述页面内容高度发生改变时，获取改变后的页面内容高度，作为所述页面对应的目标页面内容高度；

当所述目标页面内容高度大于所述页面窗口的当前页面窗口高度时，根据所述目标页面内容高度和所述当前页面窗口高度计算第一滚动条高度；

将所述页面窗口中当前展示的滚动条的高度调整为第一滚动条高度。

在其中一个实施例中，所述方法还包括：

实时检测页面窗口高度；

当检测到所述页面窗口高度发生改变时，获取改变后的页面窗口高度，作为页面窗口对应的目标页面窗口高度；

当所述目标页面窗口高度小于当前页面内容高度时，根据所述目标页面窗口高度和所述当前页面内容高度，计算第二滚动条高度；所述当前页面内容高度为所述页面窗口中当前展示的页面对应的页面内容高度；

将所述页面窗口中当前展示的滚动条的高度调整为第二滚动条高度。

一种滚动条控制装置，所述装置包括：

监听模块，用于监听滚动条控制触发事件；

记录模块，用于当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息；

获取模块，用于当所述滚动条控制触发事件为滚轮事件时，获取所述滚轮事件触发生成的滚动属性值，并根据所述滚动属性值确定滚动量和滚动方向；

确定模块，用于根据所述滚动量确定所述滚动条的位置移动量，并根据所述滚动方向确定所述滚动条的移动方向；

计算模块，用于根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息；

移动模块，用于按照所述移动方向将所述滚动条移动至所述目标位置信息对应的位置处。

在其中一个实施例中，所述确定模块，还用于获取当前页面窗口高度；根据所述当前页面窗口高度和所述滚动量，按照预设映射关系确定所述滚动条的位置移动量。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述各个实施例中所述的滚动条控制方法的步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述各个实施例中所述的滚动条控制方法的步骤。

上述滚动条控制方法、装置、计算机设备和存储介质，通过实时监听滚动条控制触发事件来获取滚动条的当前位置信息和目标位置信息，并根据当前位置信息和目标位置信息控制滚动条的移动。当监听到的滚动条控制触发事件为滚轮事件时，获取滚轮事件触发生成的滚动属性值，并根据滚动属性值确定滚动量和滚动方向，根据滚动量、滚动方向和滚动条的当前位置信息计算得到滚动条的目标位置信息，进而按照滚动方向所确定的移动方向，将滚动条有当前位置移动到目标位置信息对应的位置处。通过获取滚轮事件触发生成的滚动属性值，确定滚动条移动后的目标位置信息，而无需获取鼠标滚轮滚动的坐标值来确定滚动条移动前后的位置信息，即可控制滚动条的移动，解决了滚动条的兼容性问题，提高了滚动条的控制效率。

附图说明

图1为一个实施例中滚动条控制方法的应用场景图；

图2为一个实施例中滚动条控制方法的流程示意图；

图3为另一个实施例中滚动条控制方法的流程示意图；

图4为一个实施例中滚动条控制装置的结构框图；

图5为另一个实施例中滚动条控制装置的结构框图；

图6为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的滚动条控制方法，可以应用于如图1所示的应用环境中。其中，终端102与网页服务器104通过网络进行通信。终端102实时监听滚动条控制触发事件，当监听到滚动条控制触发事件时，记录滚动条的当前滚动位置信息；当滚动条控制触发事件为滚轮事件时，终端102获取滚轮事件触发生成的滚动属性值，根据滚动属性值和当前位置信息确定滚动条的目标位置信息和移动方向，并按照移动方向将滚动条移动至目标位置信息对应的位置处。可以理解的是，当滚动条移动时，终端102可从本地或网页服务器104中获取待显示的网页内容。当检测到页面刷新触发操作时，终端102可从本地或网页服务器104中获取刷新后展示于页面窗口的页面内容。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，网页服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种滚动条控制方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

S202，监听滚动条控制触发事件。

其中，滚动条控制触发事件是用户控制滚动条的移动时执行的触发操作所触发的事件。用户通过控制滚动条的移动可实现对页面窗口中当前展示的页面内容相对于页面窗口的移动。换而言之，页面窗口中当前展示的页面内容可随滚动条的移动而改变。滚动条控制触发事件比如滚轮事件或者拖动事件，滚轮事件是用户滚动鼠标滚轮时所触发的事件，拖动事件是用户通过鼠标点击滚动条并以按压鼠标左键的方式拖动滚动条时触发的事件。具体地，终端实时监听滚动条控制触发事件，以便于根据监听到的滚动条控制触发事件控制滚动条的移动。

S204，当监听到滚动条控制触发事件时，记录滚动条的当前位置信息。

其中，当前位置信息是指在监听到滚动条控制触发事件时滚动条当前所对应的位置信息，用于表征滚动条的当前所处的位置。当前位置信息可以是当监听到滚动条控制触发事件时滚动条距离页面窗口顶端的偏移量，或者滚动条距离终端显示屏顶端的偏移量。

具体地，终端实时监听预定义的滚动条控制触发事件，当监听滚动条控制触发事件时获取滚动条的当前位置信息，并记录该当前位置信息。在一个实施例中，终端通过预配置的事件监听函数来监听滚动条控制触发事件，并在监听到滚动条控制触发事件时记录滚动条的当前位置信息。

S206，当滚动条控制触发事件为滚轮事件时，获取滚轮事件触发生成的滚动属性值，并根据滚动属性值确定滚动量和滚动方向。

其中，滚轮事件是指用户通过滚动鼠标滚轮触发产生的事件。滚动属性值是滚轮事件触发生成的属性值，用于描述鼠标滚轮的滚动情况。滚动属性值可包括数值大小和正负符号，数值大小可用于表征鼠标滚轮的滚动量，正负符号可用于表征鼠标滚轮的滚动方向。可以理解的是，当滚动属性值为正数时，滚动属性值之前的正数符合可省略。比如，滚动属性值可以是wheelDelta属性值，鼠标滚轮向前滚动一下，wheelDelta属性值是120，鼠标滚轮向后滚动一下，wheelDelta属性值是-120。其中，wheelDelta属性值中的120是预定义的步长，鼠标滚轮滚动一步时wheelDelta属性值的数值大小为120，鼠标滚轮滚动两步时wheelDelta属性值的数值大小为240，根据wheelDelta属性值的数值大小即可确定鼠标滚轮的滚动量。相应地，可根据wheelDelta属性值的数值大小确定鼠标滚轮滚动的步数。

具体地，当监听到用户通过滚动鼠标滚轮触发的滚轮事件时，终端获取滚轮事件触发产生的滚动属性值，根据滚动属性值的数值大小确定滚轮的滚动量，并根据滚动属性值的正负符号确定滚轮的滚动方向。

在一个实施例中，终端可在本地预配置与滚轮事件对应的函数。当监听到滚轮事件时，终端调用对应于滚轮事件预配置的函数来获取滚轮事件触发生成的滚动属性值。

S208，根据滚动量确定滚动条的位置移动量，并根据滚动方向确定滚动条的移动方向。

其中，位置移动量可以是指滚动条移动的像素数量、步数或距离。滚动条移动时每一步所对应的步长可根据实际情况自定义。具体地，终端按照滚轮滚动量和滚动条的位置移动量之间的映射关系，根据滚轮滚动量计算滚动条的位置移动量。终端根据预配置的滚轮滚动方向与滚动条移动方向之间的对应关系，根据滚轮滚动方向确定滚动条的移动方向。对应关系比如滚轮向后滚时滚动条向下移动，滚轮向前滚时滚动条向上移动。映射关系比如滚动条的位置移动量＝a*滚轮滚动量，a为自定义的常量。

在一个实施例中，根据滚动量确定滚动条的位置移动量，包括：获取当前页面窗口高度；根据当前页面窗口高度和滚动量，按照预设映射关系确定滚动条的位置移动量。

其中，当前页面窗口高度是指监听到鼠标滚轮的滚轮事件时页面窗口当前所对应的高度。预设映射关系是预先定义的映射关系，用于表征当前页面窗口高度、滚轮的滚动量和滚动条的位置移动量之间的关系。预设映射关系比如滚动条的位置移动量＝b*当前页面窗口高度*滚轮的滚动量，b是自定义的常量。

具体地，当监听到滚轮事件时，终端获取显示屏当前所展示的页面窗口的高度，作为所获取到的当前页面窗口高度。终端根据所获取到的当前页面窗口高度和鼠标滚轮的滚动量，按照预设映射关系确定滚动条的位置移动量。

可以理解的是，终端在监听到滚轮事件时，若显示屏上展示有多个页面窗口，终端则检测鼠标光标所在的页面窗口，并获取该页面窗口当前对应的高度，作为获取到的当前页面窗口高度。页面窗口可理解为浏览器显示窗口。

S210，根据位置移动量、移动方向和当前位置信息计算滚动条的目标位置信息。

其中，目标位置信息是滚动条移动后的位置信息，用于表征滚动条移动后的位置。滚动条的位置信息(包括当前位置信息和目标位置信息)可以是滚动条距离页面窗口顶端或终端显示屏顶端的偏移量，也可以是滚动条距离页面窗口底端或终端显示屏底端的偏移量，还可以是滚动条距离滚动条显示区域顶端或底端的偏移量。由此，目标位置信息具体可以是滚动条的位置移动后滚动条距离页面窗口顶端或终端显示屏顶端的偏移量，也可以是滚动条的位置移动后滚动条距离页面窗口底端或终端显示屏底端的偏移量。

具体地，终端在本地预配置有位置移动量、当前位置信息和目标位置信息之间的映射关系，预配置的映射关系与滚动条的移动方向相对应。换而言之，滚动条的移动方向不同，位置移动量、当前位置信息和目标位置信息之间的映射关系也不同。终端根据滚动条的移动方向确定位置移动量、当前位置信息和目标位置信息之间的映射关系。终端根据滚动条的位置移动量和当前位置信息，按照所确定的映射关系计算滚动条的目标位置信息。

在一个实施例中，当滚动条的移动方向为向下移动时，终端将当前位置信息与位置移动量求和，得到滚动条移动后的目标位置信息；当滚动条的移动方向为向上移动时，终端将当前位置信息与位置移动量相减，得到滚动条移动后的目标位置信息。可以理解的是，当滚动条的移动方向为向下移动时，终端也可将当前位置信息与位置移动量相减，得到滚动条移动后的目标位置信息，具体依据预配置的映射关系而定。

举例说明，当滚动条的移动方向为向下移动、且滚动条的位置信息为滚动条距离页面窗口顶端或终端显示屏顶端的偏移量时，预配置的位置移动量、当前位置信息和目标位置信息之间的映射关系为：目标位置信息＝位置移动量+当前位置信息。类似地，当滚动条的移动方向为向下移动、且滚动条的位置信息为滚动条距离页面窗口底端或终端显示屏底端的偏移量时，预配置的位置移动量、当前位置信息和目标位置信息之间的映射关系为：目标位置信息＝当前位置信息-位置移动量。

在一个实施例中，滚动条的位置信息为滚动条上的指定点在预设坐标系中的坐标值。指定点比如滚动条的中心点，预设坐标系比如坐标原点在终端显示屏的左上角或左下角的直角坐标系。类似于上述映射关系的配置方式，终端可根据预设坐标系的坐标原点和滚动条的移动方向，分别配置位置移动量、当前位置信息和目标位置信息之间的映射关系。

S212，按照移动方向将滚动条移动至目标位置信息对应的位置处。

具体地，终端确定滚动条移动后的目标位置信息后，按照滚动条的移动方向将滚动条从当前位置移动到目标位置信息对应的位置处，以实现对滚动条的控制。可以理解的是，终端可按照所确定的滚动方向，将滚动条从当前位置处开始移动、且移动的距离等于滚动条的位置移动量，当滚动条的移动操作执行完毕时，滚动条所在位置对应的位置信息即为按照上述方式计算的目标位置信息。当前位置是当次移动操作开始执行时滚动条所在的位置，该当前位置由所获取到的当前位置信息表征。

在一个实施例中，当按照滚动条的移动方向将滚动条从当前位置移动至目标位置信息对应的位置处时，若计算的目标位置信息超出预设阈值位置信息范围，终端则按照移动方向将滚动条移动到相应预设阈值位置信息所对应的位置处。比如，当滚动条的移动方向为向下移动时，若计算的目标位置信息达到最大阈值位置信息时，终端将滚动条移动到最大阈值位置信息处(比如滚动条显示区域的底端)；当滚动条的移动方向为向上移动时，若计算的目标位置信息低于最小阈值位置信息时，终端将滚动条移动到最小阈值位置信息处(比如滚动条显示区域的顶端)。

上述滚动条控制方法，通过实时监听滚动条控制触发事件来获取滚动条的当前位置信息和目标位置信息，并根据当前位置信息和目标位置信息控制滚动条的移动。当监听到的滚动条控制触发事件为滚轮事件时，获取滚轮事件触发生成的滚动属性值，并根据滚动属性值确定滚动量和滚动方向，根据滚动量、滚动方向和滚动条的当前位置信息计算得到滚动条的目标位置信息，进而按照滚动方向所确定的移动方向，将滚动条有当前位置移动到目标位置信息对应的位置处。通过获取滚轮事件触发生成的滚动属性值，确定滚动条移动后的目标位置信息，而无需获取鼠标滚轮滚动的坐标值来确定滚动条移动前后的位置信息，即可控制滚动条的移动，解决了滚动条的兼容性问题，提高了滚动条的控制效率。

在一个实施例中，步骤S204之后，上述滚动条控制方法还包括：当滚动条控制触发事件为拖动事件时，调用拖动事件所绑定的函数来获取滚动条的位置移动量和移动方向，并跳转至步骤S210继续执行。

其中，拖动事件是用户通过鼠标点击滚动条并以按压鼠标左键的方式拖动滚动条时触发的事件。可以理解的是，拖动事件的触发因素包括鼠标光标置于滚动条显示的当前位置处，以及用户按压鼠标左键的同时拖动鼠标。

具体地，终端在本地预配置有与拖动事件对应的函数。当监听到用户触发的、与滚动条对应的拖动事件时，终端根据拖动事件对应查询预配置的函数，调用所查询到的函数来获取滚动条的位置移动量和移动方向，并根据滚动条的移动方向、当前位置信息和位置移动量，计算滚动条移动后的目标位置信息。当计算出滚动条的目标位置信息时，终端按照移动方向将滚动条由当前位置移动至目标位置信息对应的位置处。

在一个实施例中，当监听到拖动事件时，终端调用与该拖动事件绑定的函数来检测鼠标拖动距离，并按照鼠标拖动距离与滚动条的位置移动量之间的映射关系，根据所检测到的鼠标拖动距离计算滚动条的位置移动量。

可以理解的是，当监听到拖动事件时，终端按照预设拖动步长动态检测滚动条的位置移动量和移动方向，并计算相应的目标位置信息，进而控制滚动条的动态移动，预设步长可根据实际情况自定义。类似地，当监听到滚轮事件时，终端按照滚轮的预设滚动步长动态获取滚动属性值，并计算相应的目标位置信息，进而按照移动方向、当前位置信息和目标位置信息控制滚动条的移动。

在上述实施例中，通过调用与拖动事件绑定的函数获取滚动条的位置移动量和移动方向，并计算目标位置信息，以实现拖动事件下对滚动条的控制。

在一个实施例中，上述滚动条控制方法还包括：实时检测页面刷新触发操作；当检测到页面刷新触发操作时，记录滚动条当前相对于页面窗口的位置信息，并执行页面刷新操作；当页面刷新操作执行完毕时，按照位置信息在刷新后的页面窗口中展示滚动条，并根据位置信息将页面窗口中当前展示的页面，定位到执行页面刷新操作之前的浏览位置。

其中，页面刷新触发操作用于指示终端刷新页面窗口中当前展示的页面。页面刷新触发操作具体可以是用户对预设页面刷新触发控件的预设触发操作，预设触发操作比如点击、滑动或拖动等操作。

具体地，终端实时检测用户触发的页面刷新触发操作。当检测到页面刷新触发操作时，终端记录滚动条当前相对于页面窗口的位置信息，并执行页面刷新操作。终端记录的位置信息可以是滚动条当前相对于页面窗口的顶端或底端的偏移量。在当前执行的页面刷新操作执行完毕时，终端按照记录的位置信息在刷新后的页面窗口中展示滚动条，并根据滚动条的位置信息，以及滚动条位置信息与页面内容的对应关系，将刷新后的页面窗口中当前展示的页面，定位到执行页面刷新操作之前的浏览位置处。由此，刷新后的页面窗口中当前展示的页面内容与执行页面刷新操作之前页面窗口中所展示的页面内容一致。

在一个实施例中，当检测到页面刷新触发操作时，终端获取页面窗口中当前展示的页面内容相对于页面内所有页面内容的位置关系，根据该位置关系和页面窗口的当前高度，计算滚动条当前相对于页面窗口的位置信息。比如，假设页面窗口中当前展示的页面内容为页面中间部分的页面内容，则滚动条当前相对于页面窗口顶端和底端的偏移量相等，即滚动条当前处于滚动条显示区域的中间位置处，终端则确定该中间位置相对于页面窗口顶端获取底端的偏移量，作为滚动条当前相对于页面窗口的位置信息。

在一个实施例中，假设执行页面刷新操作之前页面窗口中当前展示的页面对应的页面内容高度，与执行页面刷新操作之后该页面对应的页面内容高度不一致，终端在检测到页面刷新触发操作时记录页面窗口中当前展示的页面内容。当页面刷新操作执行完毕时，终端计算该记录的页面内容与刷新后该页面内所有页面内容的位置关系，并根据该位置关系和页面窗口的当前高度，计算滚动条当前相对于页面窗口的位置信息，进而按照计算的位置信息在刷新后的页面窗口中展示滚动条。

上述实施例中，在执行页面刷新操作之间记录滚动条的位置信息，以便于页面刷新操作执行完毕时，根据记录的位置信息将滚动条定位至刷新前的位置处，并将页面窗口中展示的页面定位至刷新前的浏览位置处。

在一个实施例中，上述滚动条控制方法还包括：实时检测页面窗口中当前展示的页面对应的页面内容高度；当检测到页面内容高度发生改变时，获取改变后的页面内容高度，作为页面对应的目标页面内容高度；当目标页面内容高度大于页面窗口的当前页面窗口高度时，根据目标页面内容高度和当前页面窗口高度计算第一滚动条高度；将页面窗口中当前展示的滚动条的高度调整为第一滚动条高度。

其中，页面内容高度是指页面中当前待展示的所有内容对应的总高度，由页面中当前待展示的所有内容确定。当前页面窗口高度是指检测到页面的页面内容高度发生改变时，展示该页面的页面窗口当前对应的高度。

具体地，终端实时检测页面窗口中当前展示的页面对应的页面内容高度。当检测到页面的页面内容高度发生改变时，终端获取当前展示该页面的页面窗口的当前页面窗口高度，并获取改变后的页面内容高度，作为页面所对应的目标页面内容高度。终端将获取到的当前页面窗口高度与目标页面内容高度进行比较。当目标页面内容高度大于当前页面窗口高度时，终端按照滚动条高度、页面的页面内容高度和页面窗口的当前页面窗口高度之间的映射关系，根据所获取到的当前页面窗口高度和目标页面内容高度，计算页面内容高度发生改变后滚动条的高度，作为第一滚动条高度。当计算得到第一滚动条高度时，终端根据第一滚动条高度动态调整页面窗口中当前展示的滚动条的高度，即将页面窗口中当前展示的滚动条的高度调整为第一滚动高度。其中，终端可按照如下映射关系计算第一滚动条高度：第一滚动条高度＝当前页面窗口高度/目标页面内容高度*当前页面窗口高度。

在一个实施例中，当页面内容包括多个目录所对应的目录内容时，可针对每个目录提供相应的状态切换控件，用户通过对该状态切换控件执行指定触发操作，可将相应目标内容在展示状态和隐藏状态之间进行切换，以改变相应页面对应的页面内容高度。比如，假设当前目录内容为隐藏状态，当用户对状态切换控件执行指定触发操作时，可将目标内容切换为展示状态。其中，各目录下还可预配置一个或多个子目录。可以理解的是，当特定目录对应的目录内容为隐藏状态时，相应页面中当前待展示的内容不包括该特定目标对应的目录内容。当各个目录和子目录对应的目录内容均为隐藏状态时，相应页面对应的内容高度最小，当各个目录和子目录对应的目录内容为展示状态时，相应页面对应的页面内容高度最大。

在一个实施例中，滚动条在页面窗口中的展示位置会随着页面内容高度的改变而改变。当检测到页面内容高度发生改变时，终端获取页面窗口中当前展示的页面内容，并获取在页面内容高度发生改变后页面中待展示的所有页面内容，作为该页面所包含的目标页面内容，进而计算该当前展示的页面内容相对于目标页面内容的位置关系。终端根据计算的位置关系和当前页面窗口高度，计算滚动条在页面窗口中的展示位置发生改变后的位置信息，并将滚动条移动到计算的位置信息所对应的位置处。其中，终端可按照如下映射关系计算滚动条移动后所对应的位置信息：滚动条的位置信息＝位置关系*当前页面窗口高度。

上述实施例中，通过实时检测页面内容高度的改变来动态调整滚动条高度，提高了滚动条高度与页面内容高度的匹配度，以便于通过控制滚动条的移动来更好的控制页面窗口中当前展示的页面内容的改变。

在一个实施例中，上述滚动条控制方法还包括：实时检测页面窗口高度；当检测到页面窗口高度发生改变时，获取改变后的页面窗口高度，作为页面窗口对应的目标页面窗口高度；当目标页面窗口高度小于当前页面内容高度时，根据目标页面窗口高度和当前页面内容高度，计算第二滚动条高度；当前页面内容高度为页面窗口中当前展示的页面对应的页面内容高度；将页面窗口中当前展示的滚动条的高度调整为第二滚动条高度。

具体地，终端实时检测当前展示有页面的页面窗口所对应的页面窗口高度。当检测到页面窗口的页面窗口高度发生改变时，终端获取该页面窗口中当前展示的页面对应的当前页面内容高度，并获取改变后的页面窗口高度，作为该页面窗口对应的目标页面窗口高度。终端将获取到的当前页面内容高度和目标页面窗口高度进行比较。当目标页面窗口高度小于当前页面内容高度时，终端根据目标页面窗口高度和当前页面内容高度，计算页面窗口高度发生改变后滚动条的高度，作为滚动条的第二滚动条高度，并将页面窗口中当前展示的滚动条的高度动态调整为第二滚动条高度。其中，终端可按照如下映射关系计算第二滚动条高度：第二滚动条高度＝目标页面窗口高度/当前页面内容高度*目标页面窗口高度。

在一个实施例中，滚动条在页面窗口中的展示位置会随着页面窗口高度的改变而改变。当检测到页面窗口高度发生改变时，终端获取页面窗口中当前展示的位置靠前的页面内容，以及该页面窗口中当前展示的页面中当前待展示的所有页面内容，并计算该位置靠前的页面内容相对于当前待展示的所有页面内容的位置关系。终端根据计算的位置关系和目标页面窗口高度，计算页面窗口高度发生变化后滚动条的位置信息，并将滚动条移动到计算的位置信息对应的位置处。其中，位置靠前的页面内容可以是页面窗口中当前展示的所有页面内容中的位置靠前的一行或多行页面内容。位置靠前的页面内容是指该页面内容相比于页面窗口中当前展示的其他页面内容，距离页面窗口顶端或终端显示屏顶端的偏移量较小。

在一个实施中，当目标页面窗口高度大于或等于当前页面内容高度时，表明页面窗口高度发生改变后的页面窗口能够完整展示页面中当前待展示的所有页面内容，终端则通过页面窗口完整展示该所有页面内容，并隐藏展示页面窗口中的滚动条。

上述实施例中，通过实时检测页面窗口高度的改变来动态调整滚动条高度，提高了滚动条高度与页面窗口高度和页面内容高度之间的匹配度，以便于通过控制滚动条的移动来更好的控制页面窗口中当前展示的页面内容的改变。

如图3所示，在一个实施例中，提供了一种滚动条控制方法，该方法具体包括以下步骤：

S302，监听滚动条控制触发事件。

S304，当监听到滚动条控制触发事件时，记录滚动条的当前位置信息。

S306，当滚动条控制触发事件为拖动事件时，调用拖动事件所绑定的函数来获取滚动条的位置移动量和移动方向，并跳转至步骤S316继续执行。

S308，当滚动条控制触发事件为滚轮事件时，获取滚轮事件触发生成的滚动属性值，并根据滚动属性值确定滚动量和滚动方向。

S310，获取当前页面窗口高度。

S312，根据当前页面窗口高度和滚动量，按照预设映射关系确定滚动条的位置移动量。

S314，根据滚动方向确定滚动条的移动方向。

S316，根据位置移动量、移动方向和当前位置信息计算滚动条的目标位置信息。

S318，按照移动方向将滚动条移动至目标位置信息对应的位置处。

上述实施例中，针对滚轮事件和拖动事件分别提供了获取滚动条的位置移动量和移动方向的获取方式，以便于根据获取的位置移动量、移动方向和监听到滚轮事件或拖动事件时记录的当前位置信息，计算滚动条的目标位置信息，进而根据目标位置信息和移动方向控制滚动条的移动，提高了控制效率。

应该理解的是，虽然图2-3的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2-3中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图4所示，提供了一种滚动条控制装置400，包括：监听模块402、记录模块404、获取模块406、确定模块408、计算模块410和移动模块412，其中：

监听模块402，用于监听滚动条控制触发事件。

记录模块404，用于当监听到滚动条控制触发事件时，记录滚动条的当前位置信息。

获取模块406，用于当滚动条控制触发事件为滚轮事件时，获取滚轮事件触发生成的滚动属性值，并根据滚动属性值确定滚动量和滚动方向。

确定模块408，用于根据滚动量确定滚动条的位置移动量，并根据滚动方向确定滚动条的移动方向。

计算模块410，用于根据位置移动量、移动方向和当前位置信息计算滚动条的目标位置信息。

移动模块412，用于按照移动方向将滚动条移动至目标位置信息对应的位置处。

在一个实施例中，确定模块408，还用于获取当前页面窗口高度；根据当前页面窗口高度和滚动量，按照预设映射关系确定滚动条的位置移动量。

在一个实施例中，获取模块406，还用于当滚动条控制触发事件为拖动事件时，调用拖动事件所绑定的函数来获取滚动条的位置移动量和移动方向，并使得计算模块410继续执行根据位置移动量、移动方向和当前位置信息计算滚动条的目标位置信息的步骤。

如图5所示，在一个实施例中，上述滚动条控制装置400还包括：刷新模块414；

刷新模块414，用于实时检测页面刷新触发操作；当检测到页面刷新触发操作时，记录滚动条当前相对于页面窗口的位置信息，并执行页面刷新操作；当页面刷新操作执行完毕时，按照位置信息在刷新后的页面窗口中展示滚动条，并根据位置信息将页面窗口中当前展示的页面，定位到执行页面刷新操作之前的浏览位置。

在一个实施例中，上述滚动条控制装置400还包括：调整模块416；

调整模块416，用于实时检测页面窗口中当前展示的页面对应的页面内容高度；当检测到页面内容高度发生改变时，获取改变后的页面内容高度，作为页面对应的目标页面内容高度；当目标页面内容高度大于页面窗口的当前页面窗口高度时，根据目标页面内容高度和当前页面窗口高度计算第一滚动条高度；将页面窗口中当前展示的滚动条的高度调整为第一滚动条高度。

在一个实施例中，调整模块416，还用于实时检测页面窗口高度；当检测到页面窗口高度发生改变时，获取改变后的页面窗口高度，作为页面窗口对应的目标页面窗口高度；当目标页面窗口高度小于当前页面内容高度时，根据目标页面窗口高度和当前页面内容高度，计算第二滚动条高度；当前页面内容高度为页面窗口中当前展示的页面对应的页面内容高度；将页面窗口中当前展示的滚动条的高度调整为第二滚动条高度。

关于滚动条控制装置的具体限定可以参见上文中对于滚动条控制方法的限定，在此不再赘述。上述滚动条控制装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种滚动条控制方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，该存储器存储有计算机程序，该处理器执行计算机程序时实现上述各个实施例中的滚动条控制方法的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各个实施例中的滚动条控制方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种滚动条控制方法，所述方法包括：

监听滚动条控制触发事件；

当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息；

当所述滚动条控制触发事件为滚轮事件时，调用对应于所述滚轮事件预配置的函数获取所述滚轮事件触发生成的滚动属性值，所述滚动属性值包括wheelDelta属性值，并根据所述wheelDelta属性值的数值大小确定滚动量，根据所述wheelDelta属性值的正负符号确定滚动方向；

获取当前页面窗口高度，根据所述当前页面窗口高度和所述滚动量，按照预设映射关系确定所述滚动条的位置移动量，并根据所述滚动方向确定所述滚动条的移动方向；

根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息；

按照所述移动方向将所述滚动条移动至所述目标位置信息对应的位置处。

2.根据权利要求1所述的方法，其特征在于，所述当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息之后，所述方法还包括：

当所述滚动条控制触发事件为拖动事件时，调用所述拖动事件所绑定的函数来获取所述滚动条的位置移动量和移动方向，并

跳转至所述根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息的步骤继续执行。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

实时检测页面刷新触发操作；

当检测到所述页面刷新触发操作时，记录滚动条当前相对于页面窗口的位置信息，并执行页面刷新操作；

当所述页面刷新操作执行完毕时，按照所述位置信息在刷新后的页面窗口中展示所述滚动条，并根据所述位置信息将所述页面窗口中当前展示的页面，定位到执行页面刷新操作之前的浏览位置。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

实时检测页面窗口中当前展示的页面对应的页面内容高度；

当检测到所述页面内容高度发生改变时，获取改变后的页面内容高度，作为所述页面对应的目标页面内容高度；

当所述目标页面内容高度大于所述页面窗口的当前页面窗口高度时，根据所述目标页面内容高度和所述当前页面窗口高度计算第一滚动条高度；

将所述页面窗口中当前展示的滚动条的高度调整为第一滚动条高度。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

实时检测页面窗口高度；

当检测到所述页面窗口高度发生改变时，获取改变后的页面窗口高度，作为页面窗口对应的目标页面窗口高度；

当所述目标页面窗口高度小于当前页面内容高度时，根据所述目标页面窗口高度和所述当前页面内容高度，计算第二滚动条高度；所述当前页面内容高度为所述页面窗口中当前展示的页面对应的页面内容高度；

将所述页面窗口中当前展示的滚动条的高度调整为第二滚动条高度。

6.一种滚动条控制装置，其特征在于，所述装置包括：

监听模块，用于监听滚动条控制触发事件；

记录模块，用于当监听到所述滚动条控制触发事件时，记录滚动条的当前位置信息；

获取模块，用于当所述滚动条控制触发事件为滚轮事件时，调用对应于所述滚轮事件预配置的函数获取所述滚轮事件触发生成的滚动属性值，所述滚动属性值包括wheelDelta属性值，根据所述滚动属性值确定滚动量和滚动方向包括：根据所述wheelDelta属性值的数值大小确定滚动量，根据所述wheelDelta属性值的正负符号确定滚动方向；

确定模块，用于获取当前页面窗口高度，根据所述当前页面窗口高度和所述滚动量，按照预设映射关系确定所述滚动条的位置移动量，并根据所述滚动方向确定所述滚动条的移动方向；

计算模块，用于根据所述位置移动量、所述移动方向和所述当前位置信息计算所述滚动条的目标位置信息；

移动模块，用于按照所述移动方向将所述滚动条移动至所述目标位置信息对应的位置处。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括刷新模块，用于实时检测页面刷新触发操作，当检测到所述页面刷新触发操作时，记录滚动条当前相对于页面窗口的位置信息，并执行页面刷新操作，当所述页面刷新操作执行完毕时，按照所述位置信息在刷新后的页面窗口中展示所述滚动条，并根据所述位置信息将所述页面窗口中当前展示的页面，定位到执行页面刷新操作之前的浏览位置。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括调整模块，用于实时检测页面窗口中当前展示的页面对应的页面内容高度，当检测到所述页面内容高度发生改变时，获取改变后的页面内容高度，作为所述页面对应的目标页面内容高度，当所述目标页面内容高度大于所述页面窗口的当前页面窗口高度时，根据所述目标页面内容高度和所述当前页面窗口高度计算第一滚动条高度，将所述页面窗口中当前展示的滚动条的高度调整为第一滚动条高度。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至5中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至5中任一项所述的方法的步骤。

Images