一种滚动条滚动的控制方法、装置、电子设备及存储介质与流程

本申请涉及前端开发，尤其是涉及一种滚动条滚动的控制方法、装置、电子设备及存储介质。

背景技术：

1、随着计算机科学的不断发展，网页中的滚动条逐渐被越来越多的开发人员使用，常见的处理滚动条方法包括：确认鼠标位置；获取鼠标行为；将鼠标行为作用于对应的滚动条上，使滚动条进行滚动以便查看滚动区域的页面内容。

2、目前，上述方法通常使用常见的前端框架，例如，绘制出两层滚动条，内部滚动条为左右滚动，外部滚动条为上下或左右滚动，但是这种处理滚动条的方式对于普通鼠标来说，使用滚轮无法控制内部滚动。但是为了适配普通鼠标，去处理左右滚动条时可能会让触摸板、数模鼠标失灵；或者遇到上下滚动条和左右滚动条嵌套的情况，容易使其中一个滚动条失灵；并且不同开发人员编写代码方式不同，可能存在考虑欠缺，导致出现没有完善处理滚动条的情况，影响开发效率，且代码不可复用，影响后续维护工作。因此，如何控制滚动条滚动，成为了亟待解决的问题。

技术实现思路

1、有鉴于此，本申请的目的在于提供一种滚动条滚动的控制方法、装置、电子设备及存储介质，能够通过接入鼠标滚轮处理函数，获取滚动条区域对应的目标节点实例，将目标节点实例作为鼠标滚轮处理函数的输入变量，执行鼠标滚轮处理函数，不仅可以实现普通鼠标对滚动条滚动的控制功能，还无需修改业务代码，提高开发效率，便于后期维护。

2、本申请主要包括以下几个方面：

3、第一方面，本申请实施例提供了一种滚动条滚动的控制方法，所述控制方法包括：

4、响应于鼠标滚轮的滚动操作，获取鼠标光标在目标页面中的当前位置；

5、确定所述当前位置是否在滚动条区域中；

6、若是，则获取所述滚动条区域对应的目标节点实例，将所述目标节点实例作为鼠标滚轮处理函数的输入变量，执行所述鼠标滚轮处理函数，以控制所述目标节点实例对应的滚动条跟随所述鼠标滚轮进行滚动。

7、进一步的，通过以下步骤执行所述鼠标滚轮处理函数：

8、获取所述滚动条区域中的滚动条当前已经滚动的长度，并监听所述目标节点实例对应的鼠标滚轮事件；

9、当监听到所述目标节点实例对应的鼠标滚轮事件，获取所述目标节点实例对应的当前属性；

10、利用所述滚动条当前已经滚动的长度以及所述目标节点实例对应的当前属性，更新所述滚动条的当前位置。

11、进一步的，通过以下步骤构建鼠标滚轮处理函数：

12、获取所有滚动条中每个滚动条对应的节点实例；

13、检测每个滚动条对应的节点实例是否为空；

14、若为空，则生成错误提示；

15、若不为空，则检测每个滚动条对应的节点实例是否具有预设函数；其中，所述预设函数为设置所述节点实例相对于滚动条左侧的偏移的函数；

16、若具有，则将具有预设函数的节点实例对应的属性进行初始化，并对具有预设函数的节点实例添加鼠标滚轮事件的监听函数，得到鼠标滚轮处理函数。

17、进一步的，所述利用所述滚动条当前已经滚动的长度以及所述目标节点实例对应的当前属性，更新所述滚动条的当前位置的步骤，包括：

18、利用所述滚动条当前已经滚动的长度以及所述目标节点实例对应的当前属性，将所述滚动条当前已经滚动的长度与所述当前属性中的每次滚轮滚动距离的加和，确定为第一参数；

19、将所述第一参数作为预设函数的输入参数，对所述目标节点实例进行滚动设置，更新所述滚动条的当前位置。

20、进一步的，所述控制方法还包括：

21、在所述当前属性中，将触摸板的横向滚动功能的属性值更新为正常，以便恢复所述触摸板的横向滚动功能。

22、进一步的，所述滚动条区域为内层滚动区域，所述控制方法还包括：

23、当所述滚动条的当前位置为滚动边界时，确定所述当前属性中的滚轮方向是否依旧指示滚动边界所在的方向；

24、若是，则控制所述目标节点实例解除所述滚动条的控制权，并控制外层滚动条进行滚动。

25、进一步的，在控制所述目标节点实例解除所述滚动条的控制权之前，所述控制方法还包括：

26、确定所述当前属性中的触摸板操作的属性值是否指示于控制所述滚动条滚动的操作非触摸板；

27、在确定出控制所述滚动条滚动的操作非触摸板时，执行阻止事件默认动作的函数，以便对多层滚动条进行滚动隔离。

28、第二方面，本申请实施例还提供了一种滚动条滚动的控制装置，所述控制装置包括：

29、获取模块，用于响应于鼠标滚轮的滚动操作，获取鼠标光标在目标页面中的当前位置；

30、确定模块，用于确定所述当前位置是否在滚动条区域中；

31、控制模块，用于在确定所述当前位置在滚动条区域中时，获取所述滚动条区域对应的目标节点实例，将所述目标节点实例作为预先构建的鼠标滚轮处理函数的输入变量，执行所述鼠标滚轮处理函数，以控制所述目标节点实例对应的滚动条跟随所述鼠标滚轮进行滚动。

32、第三方面，本申请实施例还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如上述的滚动条滚动的控制方法的步骤。

33、第四方面，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上述的滚动条滚动的控制方法的步骤。

34、本申请实施例提供的一种滚动条滚动的控制方法、装置、电子设备及存储介质，所述控制方法包括：响应于鼠标滚轮的滚动操作，获取鼠标光标在目标页面中的当前位置；确定所述当前位置是否在滚动条区域中；若是，则获取所述滚动条区域对应的目标节点实例，将所述目标节点实例作为预先构建的鼠标滚轮处理函数的输入变量，执行所述鼠标滚轮处理函数，以控制所述目标节点实例对应的滚动条跟随所述鼠标滚轮进行滚动。

35、这样，采用本申请提供的技术方案能够通过接入鼠标滚轮处理函数，获取滚动条区域对应的目标节点实例，将目标节点实例作为鼠标滚轮处理函数的输入变量，执行鼠标滚轮处理函数，不仅可以实现普通鼠标对滚动条滚动的控制功能，还无需修改业务代码，提高开发效率，便于后期维护。

36、为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

技术特征：

1.一种滚动条滚动的控制方法，其特征在于，所述控制方法包括：

2.根据权利要求1所述的控制方法，其特征在于，通过以下步骤执行所述鼠标滚轮处理函数：

3.根据权利要求1所述的控制方法，其特征在于，通过以下步骤构建鼠标滚轮处理函数：

4.根据权利要求2所述的控制方法，其特征在于，所述利用所述滚动条当前已经滚动的长度以及所述目标节点实例对应的当前属性，更新所述滚动条的当前位置的步骤，包括：

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

6.根据权利要求2所述的控制方法，其特征在于，所述滚动条区域为内层滚动区域，所述控制方法还包括：

7.根据权利要求6所述的控制方法，其特征在于，在控制所述目标节点实例解除所述滚动条的控制权之前，所述控制方法还包括：

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

9.一种电子设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过所述总线进行通信，所述机器可读指令被所述处理器运行时执行如权利要求1至7任一所述的滚动条滚动的控制方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至7任一所述的滚动条滚动的控制方法的步骤。

技术总结
本申请提供了一种滚动条滚动的控制方法、装置、电子设备及存储介质，控制方法包括：响应于鼠标滚轮的滚动操作，获取鼠标光标在目标页面中的当前位置；确定所述当前位置是否在滚动条区域中；若是，则获取所述滚动条区域对应的目标节点实例，将所述目标节点实例作为预先构建的鼠标滚轮处理函数的输入变量，执行所述鼠标滚轮处理函数，以控制所述目标节点实例对应的滚动条跟随所述鼠标滚轮进行滚动。采用本申请提供的技术方案能够通过接入鼠标滚轮处理函数，不仅可以实现普通鼠标对滚动条滚动的控制功能，还无需修改业务代码，提高开发效率，便于后期维护。

技术研发人员：杨达,朱丽莹
受保护的技术使用者：杭州朝厚信息科技有限公司
技术研发日：
技术公布日：2024/5/6