滚动条控制方法及装置.pdf

本发明公开一种滚动条控制方法及装置；本发明实施例将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；监控所述原生滚动条容器的滚动事件；根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致；具有实现自定义滚动条的同时，保留原生滚动条的事件体系和默认行为有益效果，且实现代码简单，丝毫不影响用户加载网页的速度。

权利要求书
1.  一种滚动条控制方法，其特征在于，包括以下步骤：
将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器 中；
监控所述原生滚动条容器的滚动事件；
根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义 滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致。

2.  如权利要求1所述的方法，其特征在于，所述根据所述原生滚动条容 器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，之前还包括：
在监控到所述原生滚动条容器有内容更新时，识别所述外层容器是否存 在自定义滚动条；
若存在自定义滚动条，则显示自定义滚动条；
若不存在自定义滚动条，则创建自定义滚动条；将创建的自定义滚动条 嵌入所述外层容器中，并将所述自定义滚动条定位至与所述原生滚动条的位 置对应的所述外层容器的右边界处。

3.  如权利要求1或2所述的方法，其特征在于，所述根据所述原生滚动条 容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，包括：
在监控到所述原生滚动条容器有内容更新时，检测所述原生滚动条容器 是否有滚动条出现；
在所述原生滚动条容器有滚动条出现时，分别获取所述原生滚动条容器 及外层容器对应的参数；
根据获取的所述原生滚动条容器及外层容器对应的参数，以及所述原生 滚动条在原生滚动条容器中的位置，计算自定义滚动条在所述外层容器中的 位置；
根据计算结果，操作所述外层容器中自定义滚动条的位置。

4.  如权利要求3所述的方法，其特征在于，所述原生滚动条容器有滚动 条出现时，分别获取所述原生滚动条容器及外层容器对应的参数，之前还包 括：
将所述原生滚动条容器增加预设宽度值，并设置所述原生滚动条容器为 层叠样式，同时，在所述原生滚动条容器的内容部分增加所述预设宽度值的 右填充。

5.  如权利要求4所述的方法，其特征在于，所述检测所述原生滚动条容 器是否有滚动条出现，之后还包括：
在所述原生滚动条容器没有滚动条出现时，还原所述原生滚动条容器的 宽度，并去掉增加的所述右填充。

6.  如权利要求3所述的方法，其特征在于，所述根据获取的所述原生滚 动条容器及外层容器对应的参数，以及所述原生滚动条在原生滚动条容器中 的位置，计算自定义滚动条在所述外层容器中的位置，包括：
根据获取的原生滚动条容器所对应的原生滚动条容器高度、第一显示内 容高度、第一显示内容滚动位置以及外层容器高度，计算得到所述第一显示 内容高度与原生滚动条容器高度的高度比值；
利用所述高度比值乘以所述外层容器高度，得到自定义滚动条在外层容 器中对应的第二显示内容高度；利用所述高度比值乘以所述原生滚动条在原 生滚动条容器中的位置高度，得到所述自定义滚动条在所述外层容器中的位 置。

7.  如权利要求1或2所述的方法，其特征在于，所述将浏览器原生滚动条 所在的原生滚动条容器嵌套到预设的一外层容器中，之后还包括：
监控用户基于自定义滚动条所触发的滚动事件；
根据用户基于自定义滚动条所触发的滚动事件，触发所述原生滚动条对 应的滚动事件，从而联动改变所述自定义滚动条的对应位置。

8.  如权利要求7所述的方法，其特征在于，所述根据用户基于自定义滚 动条所触发的滚动事件，触发所述原生滚动条对应的滚动事件，包括：
根据用户基于自定义滚动条所触发的滚动事件，获取所述滚动事件对应 的自定义滚动条在垂直方向和/或水平方向的位移；同时，获取外层容器对应 的第三显示内容高度和/或第三显示内容宽度，以及原生滚动条容器高度和/ 或原生滚动条容器宽度；
所述位移为垂直方向位移时，利用所述垂直方向位移除以所述第三显示 内容高度，再乘以所述原生滚动条容器高度，获取所述原生滚动条在垂直方 向上的滚动位置；所述位移为水平方向位移时，利用所述水平方向位移除以 所述第三显示内容宽度，再乘以所述原生滚动条容器宽度，获取所述原生滚 动条在水平方向上的滚动位置；
根据获取的所述原生滚动条在垂直方向和/或水平方向上的滚动位置，操 作所述原生滚动条至所述滚动位置。

9.  一种滚动条控制装置，其特征在于，包括：
设置模块，用于将浏览器原生滚动条所在的原生滚动条容器嵌套到预设 的一外层容器中；
监控模块，用于监控所述原生滚动条容器的滚动事件；
控制模块，用于根据所述原生滚动条容器对应的滚动事件，操作所述外 层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持 一致。

10.  如权利要求9所述的装置，其特征在于，所述监控模块还用于：
在监控到所述原生滚动条容器有内容更新时，识别所述外层容器是否存 在自定义滚动条；
若存在自定义滚动条，则显示自定义滚动条；
若不存在自定义滚动条，则创建自定义滚动条；将创建的自定义滚动条 嵌入所述外层容器中，并将所述自定义滚动条定位至与所述原生滚动条的位 置对应的所述外层容器的右边界处。

11.  如权利要求9或10所述的装置，其特征在于，所述控制模块还用于：
在所述监控模块监控到所述原生滚动条容器有内容更新时，检测所述原 生滚动条容器是否有滚动条出现；
在所述原生滚动条容器有滚动条出现时，分别获取所述原生滚动条容器 及外层容器对应的参数；
根据获取的所述原生滚动条容器及外层容器对应的参数，以及所述原生 滚动条在原生滚动条容器中的位置，计算自定义滚动条在所述外层容器中的 位置；
根据计算结果，操作所述外层容器中自定义滚动条的位置。

12.  如权利要求11所述的装置，其特征在于，所述控制模块还用于：
在原生滚动条容器有滚动条出现时，将所述原生滚动条容器增加预设宽 度值，并设置所述原生滚动条容器为层叠样式，同时，在所述原生滚动条容 器的内容部分增加所述预设宽度值的右填充。

13.  如权利要求12所述的装置，其特征在于，所述控制模块还用于：
在原生滚动条容器没有滚动条出现时，还原所述原生滚动条容器的宽度， 并去掉增加的所述右填充。

14.  如权利要求11所述的装置，其特征在于，所述控制模块还用于：
根据获取的原生滚动条容器所对应的原生滚动条容器高度、第一显示内 容高度、第一显示内容滚动位置以及外层容器高度，计算得到所述第一显示 内容高度与原生滚动条容器高度的高度比值；
利用所述高度比值乘以所述外层容器高度，得到自定义滚动条在外层容 器中对应的第二显示内容高度；利用所述高度比值乘以所述原生滚动条在原 生滚动条容器中的位置高度，得到所述自定义滚动条在所述外层容器中的位 置。

15.  如权利要求9或10所述的装置，其特征在于，所述监控模块还用于：
监控用户基于自定义滚动条所触发的滚动事件；
所述控制模块还用于：
根据用户基于自定义滚动条所触发的滚动事件，触发所述原生滚动条对 应的滚动事件，从而联动改变所述自定义滚动条的对应位置。

16.  如权利要求15所述的装置，其特征在于，所述控制模块还用于：
根据用户基于自定义滚动条所触发的滚动事件，获取所述滚动事件对应 的自定义滚动条在垂直方向和/或水平方向的位移；同时，获取外层容器对应 的第三显示内容高度和/或第三显示内容宽度，以及原生滚动条容器高度和/ 或原生滚动条容器宽度；
所述位移为垂直方向位移时，利用所述垂直方向位移除以所述第三显示 内容高度，再乘以所述原生滚动条容器高度，获取所述原生滚动条在垂直方 向上的滚动位置；所述位移为水平方向位移时，利用所述水平方向位移除以 所述第三显示内容宽度，再乘以所述原生滚动条容器宽度，获取所述原生滚 动条在水平方向上的滚动位置；
根据获取的所述原生滚动条在垂直方向和/或水平方向上的滚动位置，操 作所述原生滚动条至所述滚动位置。

说明书滚动条控制方法及装置
技术领域
本发明涉及浏览器领域，尤其涉及一种滚动条控制方法及装置。
背景技术
对于浏览器提供的原生滚动条无法自定义样式的缺陷，目前采用的解决 方式是利用网页脚本对浏览器新增自定义滚动条，以模拟原生滚动条的行为 和样式。上述这种方案解决了原生滚动条无法自定义样式的缺陷，但同时破 坏了原生滚动条的事件体系及一些默认行为，比如网页可以监听的滚动事件、 滚动事件的冒泡及鼠标滚轮滚动、上下键触发的滚动、嵌套滚动问题等原生 滚动条常用的事件行为，该自定义滚动条都可能无法提供；若使用网页脚本 来完整模拟原生滚动条的所有行为，则代码开发成本很高且代码量大，而大 量的代码将导致用户加载网页的速度变得十分缓慢，用户满意度低。
发明内容
鉴于此，有必要提供一种滚动条控制方法及装置，以实现自定义滚动条 的同时保留原生滚动条的事件体系和默认行为。
本发明实施例公开了一种滚动条控制方法，包括以下步骤：
将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器 中；
监控所述原生滚动条容器的滚动事件；
根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义 滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致。
本发明实施例还公开了一种滚动条控制装置，包括：
设置模块，用于将浏览器原生滚动条所在的原生滚动条容器嵌套到预设 的一外层容器中；
监控模块，用于监控所述原生滚动条容器的滚动事件；
控制模块，用于根据所述原生滚动条容器对应的滚动事件，操作所述外 层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持 一致。
本发明实施例将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的 一外层容器中；监控所述原生滚动条容器的滚动事件；根据所述原生滚动条 容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自 定义滚动条与所述原生滚动条保持一致；具有实现自定义滚动条的同时，保 留原生滚动条的事件体系和默认行为有益效果，且实现代码简单，丝毫不影 响用户加载网页的速度。
附图说明
图1是本发明滚动条控制方法第一实施例流程示意图；
图2为一具体应用场景中显示的滚动条一实施例场景示意图；
图3是本发明滚动条控制方法第二实施例流程示意图；
图4是本发明滚动条控制方法第三实施例流程示意图；
图5是本发明滚动条控制方法中，根据原生滚动条操作自定义滚动条第 一实施例流程示意图；
图6是本发明滚动条控制方法中，根据原生滚动条操作自定义滚动条第 二实施例流程示意图；
图7是本发明滚动条控制装置一实施例功能模块示意图。
本发明实施例目的的实现、功能特点及优点将结合实施例，参照附图做 进一步说明。
具体实施方式
以下结合说明书附图及具体实施例进一步说明本发明的技术方案。应当 理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
图1是本发明滚动条控制方法第一实施例流程示意图；如图1所示，本 发明滚动条控制方法包括以下步骤：
步骤S01、将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外 层容器中；
本发明实施例中，通过在原生滚动条所在的容器的外层包裹一个容器， 并作为承载自定义滚动条及隐藏子容器的原生滚动条的容器，如此，即可实 现自定义滚动条样式的同时，保留浏览器原生滚动条的事件体系及默认行为。
本实施例中，浏览器利用HTML（Hypertext Markup Language，超文本标 记语言）的块元素（比如div元素）作为预设的一外层容器，将原生滚动条所 在的原生滚动条容器嵌套到该外层容器中。
步骤S02、监控所述原生滚动条容器的滚动事件；
步骤S03、根据所述原生滚动条容器对应的滚动事件，操作所述外层容器 中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致。
浏览器实时监控基于原生滚动条容器所触发的操作事件，在该原生滚动 条容器初始化及每次原生滚动条容器有内容更新时，检测该原生滚动条容器 是否有滚动事件触发；浏览器根据原生滚动条容器对应的操作事件，识别是 否有滚动条出现。也可以理解为，浏览器根据原生滚动条容器对应的显示内 容的更新或者其他操作事件，识别是否触发了原生滚动条对应的滚动事件。
在浏览器监控到有原生滚动条对应的滚动事件触发时，则根据触发的原 生滚动条对应的滚动事件，浏览器获取该原生滚动条基于原始滚动条容器所 滚动的具体位置；根据获取的该原生滚动条基于原始滚动条容器所滚动的具 体位置，计算获取自定义滚动条基于外层容器的具体滚动位置，这其中包括 原生滚动条的滚动方向、滚动位置，及对应的自定义滚动条根据原生滚动条 的变化，自定义滚动条自身的滚动方向和滚动位置。根据原生滚动条容器对 应的滚动事件，操作该外层容器中自定义滚动条的滚动，使得该自定义滚动 条与原生滚动条的滚动保持一致。
采用上述方式，丝毫不影响浏览器原生滚动条的事件体系及默认行为。 图2为一具体应用场景中显示的滚动条一实施例场景示意图，在图2所示的 网页中，比如浏览器监听到鼠标滚轮滚动、上下方向按键的按下这些行为事 件时，根据监听到的具体行为事件，浏览器操作原生滚动条执行对应的滚动 操作，从而可以联动显示的自定义滚动条执行与原生滚动条一致的滚动；在 用户享用自定义滚动条样式的同时，丝毫不影响原生滚动条的事件体系及默 认行为。
本发明实施例将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的 一外层容器中；监控所述原生滚动条容器的滚动事件；根据所述原生滚动条 容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自 定义滚动条与所述原生滚动条保持一致；具有实现自定义滚动条的同时，保 留原生滚动条的事件体系和默认行为有益效果，且实现代码简单，丝毫不影 响用户加载网页的速度；提高了人机的可交互性操作。
图3是本发明滚动条控制方法第二实施例流程示意图；本实施例与图1 所述实施例的区别是，本发明实施例浏览器监控所述原生滚动条容器的滚动 事件时，若监控到原生滚动条容器有内容更新时，需要识别外层容器是否存 在自定义滚动条。
基于图1、图2所述实施例的具体描述，如图3所示，本发明滚动条控制方 法在图1所述实施例的“步骤S02、监控所述原生滚动条容器的滚动事件”之 后，在“步骤S03、根据所述原生滚动条容器对应的滚动事件，操作所述外层 容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一 致”之前，还包括：
步骤S101、识别所述外层容器是否存在自定义滚动条；若是，则执行步 骤S102；若否，则执行步骤S103；
步骤S102、显示自定义滚动条；
步骤S103、创建自定义滚动条；将创建的自定义滚动条嵌入所述外层容 器中，并将所述自定义滚动条定位至与所述原生滚动条的位置对应的所述外 层容器的右边界处。
浏览器监控到原生滚动条容器有内容更新时，识别该原生滚动条容器所 嵌套的外层容器是否存在自定义滚动条，即在该外层容器中，识别是否存在 有自定义显示样式的自定义滚动条。若该外层容器中存在自定义滚动条，则 直接将外层容器中存在的自定义滚动条显示出来，供用户查看或使用；若该 外层容器中不存在自定义滚动条，则浏览器按照预定的滚动条创建规则及滚 动条的显示样式，新创建一自定义滚动条，并将创建好的自定义滚动条嵌入 该外层容器中。为了保持自定义滚动条与原生滚动条的一致性，进一步地也 为了满足用户的使用习惯，将新创建的该自定义滚动条定位至与原生滚动条 的位置对应的外层容器的右边界处。
本发明实施例通过识别是否存在自定义滚动条，在存在自定义滚动条时 将其进行显示，在不存在自定义滚动条时创建自定义滚动条，具有根据滚动 条的显示样式灵活创建自定义滚动条的有益效果。
图4是本发明滚动条控制方法第三实施例流程示意图；本发明实施例与 图1或者图3所述实施例的区别是，浏览器在监控原生滚动条容器的操作事 件的同时，监听用户基于自定义滚动条所触发的操作事件。
基于图1、图2和图3所述实施例的具体描述，如图4所示，本发明滚动 条控制方法包括以下步骤：
步骤S01、将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外 层容器中；
本发明实施例中，通过在原生滚动条所在的容器的外层包裹一个容器， 并作为承载自定义滚动条及隐藏子容器的原生滚动条的容器，如此，即可实 现自定义滚动条样式的同时，保留浏览器原生滚动条的事件体系及默认行为。
本实施例中，浏览器利用HTML的块元素（比如div元素）作为预设的 一外层容器，将原生滚动条所在的原生滚动条容器嵌套到该外层容器中。
步骤S11、监控用户基于自定义滚动条所触发的滚动事件；
本发明实施例中，浏览器监控原生滚动条对应的滚动事件的同时，监控 用户基于自定义滚动条所触发的操作事件。从监控到的用户基于自定义滚动 条所触发的操作事件中，浏览器识别出自定义滚动条的滚动事件，从而响应 该自定义滚动条的滚动事件，执行对应操作。
步骤S12、根据用户基于自定义滚动条所触发的滚动事件，触发所述原生 滚动条对应的滚动事件，从而联动改变所述自定义滚动条的对应位置。
浏览器根据监控到的用户基于自定义滚动条所触发的滚动事件，响应该 自定义滚动条所对应的滚动事件，获取该自定义滚动条的滚动方向及滚动位 置；根据获取的该自定义滚动条的滚动方向及滚动位置，触发原生滚动条对 应的滚动事件；即触发原生滚动条相对于原生滚动条容器执行相应的滚动方 向及滚动位置；进而再根据原生滚动条的滚动事件，联动改变自定义滚动条 的对应位置。
本实施例中，浏览器根据用户基于自定义滚动条所触发的滚动事件，触 发所述原生滚动条对应的滚动事件，包括：
根据用户基于自定义滚动条所触发的滚动事件，比如，浏览器监控用户 基于自定义滚动条执行的鼠标拖动自定义滚动条的滚动事件时，浏览器获取 所述滚动事件对应的自定义滚动条在垂直方向和/或水平方向的位移；同时， 获取外层容器对应的显示内容高度和/或显示内容宽度，以及原生滚动条容器 高度和/或原生滚动条容器宽度；
当该自定义滚动条在垂直方向移动时，利用获取的垂直方向位移除以所 述显示内容高度，再乘以所述原生滚动条容器高度，获取所述原生滚动条在 垂直方向上的滚动位置；所述位移为水平方向位移时，利用获取的水平方向 位移除以所述显示内容宽度，再乘以所述原生滚动条容器宽度，获取所述原 生滚动条在水平方向上的滚动位置；根据获取的所述原生滚动条在垂直方向 和/或水平方向上的滚动位置，操作所述原生滚动条至所述滚动位置。
本发明实施例浏览器在监控原生滚动条对应的操作事件的同时，监控自 定义滚动条对应的滚动事件，并根据自定义滚动条对应的滚动事件，触发原 生滚动条的操作事件，从而联动改变自定义滚动条滚动至相应位置；具有使 自定义滚动条与原生滚动条二者相互兼容的有益效果。
图5是本发明滚动条控制方法中，根据原生滚动条操作自定义滚动条第 一实施例流程示意图；本实施例仅对根据原生滚动条操作自定义滚动条这一 操作步骤进行进一步地描述，有关本发明滚动条控制方法所涉及的其他步骤 请参照相关实施例的具体描述，在此不再赘述。
如图5所示，本发明滚动条控制方法中，根据所述原生滚动条容器对应 的滚动事件，操作所述外层容器中自定义滚动条的位置，包括：
步骤S21、检测所述原生滚动条容器是否有滚动条出现；在原生滚动条容 器有滚动条出现时，执行步骤S22；
浏览器监测到原生滚动条容器的滚动事件时，检测该原生滚动条容器中 是否有滚动条出现；在该原生滚动容器中没有滚动条出现时，若是首次执行 本发明实施例滚动条控制方法，则浏览器继续监控原生滚动条容器的操作事 件。
步骤S22、分别获取原生滚动条容器及外层容器对应的参数；
若浏览器检测到原生滚动条容器有滚动条出现时，浏览器获取原生滚动 条容器及外层容器对应的参数；上述参数包括：原生滚动条容器所对应的显 示内容宽度a1、显示内容高度b1、显示内容的滚动位置高度c1以及原生滚动条 容器高度h1、外层容器对应的外层容器高度h2。
步骤S23、根据获取的原生滚动条容器及外层容器对应的参数，以及原生 滚动条在原生滚动条容器中的位置，计算自定义滚动条在所述外层容器中的 位置；
步骤S24、根据计算结果，操作所述外层容器中自定义滚动条的位置。
根据获取的原生滚动条容器所对应的显示内容高度b1、显示内容的滚动 位置高度c1以及原生滚动条容器高度h1、外层容器高度h2，计算得到显示内 容高度b1与原生滚动条容器高度h1的高度比值x1；利用所述高度比值x1乘以 所述外层容器高度h2，得到自定义滚动条在外层容器中对应的显示内容高度 b2；利用所述高度比值x1乘以所述显示内容的滚动位置高度c1，得到所述自 定义滚动条在外层容器中的滚动位置高度c2。根据计算出的自定义滚动条对 应的外层容器中，显示内容高度b2及自定义滚动条在外层容器中的滚动位置 高度c2，操作该外层容器中对应的自定义滚动条的位置。
本实施例中各参数的数值所对应的单位均以像素数来计算。
本发明实施例根据原生滚动条容器对应的滚动事件，操作外层容器中自 定义滚动条的位置；具有根据原生滚动条对应的滚动事件，实时对应操作自 定义滚动条的有益效果。
图6是本发明滚动条控制方法中，根据原生滚动条操作自定义滚动条第 二实施例流程示意图；本实施例与图5所述实施例的区别是，在浏览器检测 到原生滚动条容器有滚动条出现时，在“步骤S22、分别获取原生滚动条容器 及外层容器对应的参数”之前，增加了：
步骤S20、将原生滚动条容器增加一预设宽度值，并设置所述原生滚动条 容器为层叠样式，同时，在所述原生滚动条容器的内容部分增加所述预设宽 度值的右填充。
基于上述实施例的具体描述，本实施例中，浏览器检测到原生滚动条容 器有滚动条出现时，将原生滚动条容器增加预设宽度值，并设置所述原生滚 动条容器为层叠样式，同时，在所述原生滚动条容器的内容部分增加所述预 设宽度值的右填充。
在具体的应用场景中，该预设宽度值的取值为大于等于17像素。比如， 在浏览器监控到有滚动条出现时，将原生滚动条容器增加至少17像素，并设 置CSS（Cascading Style Sheets，层叠样式表）样式：
::-webkit-scrollbar{width:0;height:0;}；这样做的目的是，为了防止chrome 和safari等webkit内核的浏览器出现滚动条时，在鼠标拖拽的情况下，出现 滚动条无法隐藏的问题；同时，在该原生滚动条容器的右边新增同等大小的 内填充（padding-right）即上述右填充，保证新增宽度后原生滚动条被外层容 器隐藏的同时，原生滚动条容器的内容部分的宽度不变；在实际应用中，浏 览器对于原生滚动条容器的内容部分也可以根据自定义滚动条的大小，对其 进行微调。
基于以上描述，在图5所述实施例中，浏览器监测到原生滚动条容器的滚 动事件时，检测该原生滚动条容器中是否有滚动条出现；在该原生滚动容器 中没有滚动条出现时，执行如下步骤：
步骤S25、还原原生滚动条容器的宽度，并去掉增加的右填充；
若是浏览器已执行了增加原生滚动条容器宽度的操作，则在原生滚动容 器中没有滚动条出现时，浏览器还原所述原生滚动条容器的宽度，并去掉增 加的所述右填充。
本发明实施例将原生滚动条容器增加一预设宽度值，并设置所述原生滚 动条容器为层叠样式；避免了针对部分浏览器在出现滚动条时，在鼠标拖拽 的情况下，出现滚动条无法隐藏的问题；同时，在该原生滚动条容器的右边 新增同等大小的右填充，具有保证新增宽度后原生滚动条被外层容器隐藏的 同时，原生滚动条容器的内容部分的宽度不变的有益效果。
图7是本发明滚动条控制装置第一实施例功能模块示意图；如图7所示， 本发明滚动条控制装置包括：设置模块01、监控模块02和控制模块03。
设置模块01，用于将浏览器原生滚动条所在的原生滚动条容器嵌套到预 设的一外层容器中；
本发明实施例中，设置模块01在原生滚动条所在的容器的外层包裹一个 容器，并作为承载自定义滚动条及隐藏子容器的原生滚动条的容器，如此， 即可实现自定义滚动条样式的同时，保留浏览器原生滚动条的事件体系及默 认行为。
本实施例中，设置模块01利用HTML的块元素（比如div元素）作为预 设的一外层容器，将原生滚动条所在的原生滚动条容器嵌套到该外层容器中。
监控模块02，用于监控所述原生滚动条容器的滚动事件；
控制模块03，用于根据所述原生滚动条容器对应的滚动事件，操作所述 外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保 持一致。
监控模块02实时监控基于原生滚动条容器所触发的操作事件，在该原生 滚动条容器初始化及每次原生滚动条容器有内容更新时，检测该原生滚动条 容器是否有滚动事件触发；监控模块02根据原生滚动条容器对应的操作事件， 识别是否有滚动条出现。也可以理解为，监控模块02根据原生滚动条容器对 应的显示内容的更新或者其他操作事件，识别是否触发了原生滚动条对应的 滚动事件。
在监控模块02监控到有原生滚动条对应的滚动事件触发时，控制模块03 根据触发的原生滚动条对应的滚动事件，获取该原生滚动条基于原始滚动条 容器所滚动的具体位置；控制模块03根据获取的该原生滚动条基于原始滚动 条容器所滚动的具体位置，计算获取自定义滚动条基于外层容器的具体滚动 位置，这其中包括原生滚动条的滚动方向、滚动位置，及对应的自定义滚动 条根据原生滚动条的变化，自定义滚动条自身的滚动方向和滚动位置。控制 模块03根据原生滚动条容器对应的滚动事件，操作该外层容器中自定义滚动 条的滚动，使得该自定义滚动条与原生滚动条的滚动保持一致。
采用上述方式，丝毫不影响浏览器原生滚动条的事件体系及默认行为。 图2为一具体应用场景中显示的滚动条一实施例场景示意图，在图2所示的 网页中，比如监控模块02监听到鼠标滚轮滚动、上下方向按键的按下这些行 为事件时，根据监听到的具体行为事件，控制模块03操作原生滚动条执行对 应的滚动操作，从而可以联动显示的自定义滚动条执行与原生滚动条一致的 滚动；在用户享用自定义滚动条样式的同时，丝毫不影响原生滚动条的事件 体系及默认行为。
本发明实施例将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的 一外层容器中；监控所述原生滚动条容器的滚动事件；根据所述原生滚动条 容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自 定义滚动条与所述原生滚动条保持一致；具有实现自定义滚动条的同时，保 留原生滚动条的事件体系和默认行为有益效果，且实现代码简单，丝毫不影 响用户加载网页的速度；提高了人机的可交互性操作。
请再次参照图7，本实施例与上述实施例的区别是，本发明实施例监控模 块02监控所述原生滚动条容器的滚动事件时，若监控到原生滚动条容器有内 容更新时，需要识别外层容器是否存在自定义滚动条。
如图7所示，本发明滚动条控制装置中，监控模块02还用于：
在监控到所述原生滚动条容器有内容更新时，识别所述外层容器是否存 在自定义滚动条；
若存在自定义滚动条，则显示自定义滚动条；
若不存在自定义滚动条，则创建自定义滚动条；将创建的自定义滚动条 嵌入所述外层容器中，并将所述自定义滚动条定位至与所述原生滚动条的位 置对应的所述外层容器的右边界处。
本实施例中，监控模块02监控到原生滚动条容器有内容更新时，识别该 原生滚动条容器所嵌套的外层容器是否存在自定义滚动条，即在该外层容器 中，识别是否存在有自定义显示样式的自定义滚动条。若该外层容器中存在 自定义滚动条，则直接将外层容器中存在的自定义滚动条显示出来，供用户 查看或使用；若该外层容器中不存在自定义滚动条，则监控模块02按照预定 的滚动条创建规则及滚动条的显示样式，新创建一自定义滚动条，并将创建 好的自定义滚动条嵌入该外层容器中。为了保持自定义滚动条与原生滚动条 的一致性，进一步地也为了满足用户的使用习惯，将新创建的该自定义滚动 条定位至与原生滚动条的位置对应的外层容器的右边界处。
本发明实施例通过识别是否存在自定义滚动条，在存在自定义滚动条时 将其进行显示，在不存在自定义滚动条时创建自定义滚动条，具有根据滚动 条的显示样式灵活创建自定义滚动条的有益效果。
请再次参照图7，本发明实施例中，监控模块02在监控原生滚动条容器 的操作事件的同时，监听用户基于自定义滚动条所触发的操作事件。
如图7所示，监控模块02监控原生滚动条对应的滚动事件的同时，监控用 户基于自定义滚动条所触发的操作事件。从监控到的用户基于自定义滚动条 所触发的操作事件中，监控模块02识别出自定义滚动条的滚动事件，从而由 控制模块03响应该自定义滚动条的滚动事件，执行对应操作。
根据监控模块02监控到的用户基于自定义滚动条所触发的滚动事件，控 制模块03响应该自定义滚动条所对应的滚动事件，获取该自定义滚动条的滚 动方向及滚动位置；控制模块03根据获取的该自定义滚动条的滚动方向及滚 动位置，触发原生滚动条对应的滚动事件；即触发原生滚动条相对于原生滚 动条容器执行相应的滚动方向及滚动位置；进而再根据原生滚动条的滚动事 件，联动改变自定义滚动条的对应位置。
本实施例中，控制模块03根据用户基于自定义滚动条所触发的滚动事件， 触发所述原生滚动条对应的滚动事件，包括：
根据用户基于自定义滚动条所触发的滚动事件，比如，监控模块02监控 用户基于自定义滚动条执行的鼠标拖动自定义滚动条的滚动事件时，控制模 块03获取所述滚动事件对应的自定义滚动条在垂直方向和/或水平方向的位 移；同时，控制模块03获取外层容器对应的显示内容高度和/或显示内容宽度， 以及原生滚动条容器高度和/或原生滚动条容器宽度；
当该自定义滚动条在垂直方向移动时，控制模块03利用获取的垂直方向 位移除以所述显示内容高度，再乘以所述原生滚动条容器高度，获取所述原 生滚动条在垂直方向上的滚动位置；所述位移为水平方向位移时，控制模块 03利用获取的水平方向位移除以所述显示内容宽度，再乘以所述原生滚动条 容器宽度，获取所述原生滚动条在水平方向上的滚动位置；根据获取的所述 原生滚动条在垂直方向和/或水平方向上的滚动位置，控制模块03操作所述原 生滚动条至所述滚动位置。
本发明实施例浏览器在监控原生滚动条对应的操作事件的同时，监控自 定义滚动条对应的滚动事件，并根据自定义滚动条对应的滚动事件，触发原 生滚动条的操作事件，从而联动改变自定义滚动条滚动至相应位置；具有使 自定义滚动条与原生滚动条二者相互兼容的有益效果。
本发明实施例滚动条控制装置中，控制模块03根据原生滚动条容器对应 的滚动事件，操作外层容器中自定义滚动条的位置的一具体实施方式为：
监控模块02监测到原生滚动条容器的滚动事件时，控制模块03检测该原 生滚动条容器中是否有滚动条出现；在该原生滚动容器中没有滚动条出现时， 若是首次执行本发明实施例滚动条控制方法，则由监控模块02继续监控原生 滚动条容器的操作事件。
若控制模块03检测到原生滚动条容器有滚动条出现时，控制模块03获取 原生滚动条容器及外层容器对应的参数；上述参数包括：原生滚动条容器所 对应的显示内容宽度a1、显示内容高度b1、显示内容的滚动位置高度c1以及原 生滚动条容器高度h1、外层容器对应的外层容器高度h2。
控制模块03根据获取的原生滚动条容器所对应的显示内容高度b1、显示 内容的滚动位置高度c1以及原生滚动条容器高度h1、外层容器高度h2，计算 得到显示内容高度b1与原生滚动条容器高度h1的高度比值x1；利用所述高度 比值x1乘以所述外层容器高度h2，控制模块03得到自定义滚动条在外层容器 中对应的显示内容高度b2；利用所述高度比值x1乘以所述显示内容的滚动位 置高度c1，控制模块03得到所述自定义滚动条在外层容器中的滚动位置高度 c2。根据计算出的自定义滚动条对应的外层容器中，显示内容高度b2及自定 义滚动条在外层容器中的滚动位置高度c2，控制模块03操作该外层容器中对 应的自定义滚动条的位置。
本实施例中各参数的数值所对应的单位均以像素数来计算。
本发明实施例根据原生滚动条容器对应的滚动事件，操作外层容器中自 定义滚动条的位置；具有根据原生滚动条对应的滚动事件，实时对应操作自 定义滚动条的有益效果。
进一步地，在控制模块03检测到原生滚动条容器有滚动条出现时，将原 生滚动条容器增加预设宽度值，并设置所述原生滚动条容器为层叠样式，同 时，在所述原生滚动条容器的内容部分增加所述预设宽度值的右填充。
在具体的应用场景中，该预设宽度值的取值为大于等于17像素。比如， 在控制模块03检测到有滚动条出现时，将原生滚动条容器增加至少17像素， 并设置CSS样式：
::-webkit-scrollbar{width:0;height:0;}；这样做的目的是，为了防止chrome 和safari等webkit内核的浏览器出现滚动条时，在鼠标拖拽的情况下，出现 滚动条无法隐藏的问题；同时，在该原生滚动条容器的右边新增同等大小的 内填充即上述右填充，保证新增宽度后原生滚动条被外层容器隐藏的同时， 原生滚动条容器的内容部分的宽度不变；在实际应用中，控制模块03对于原 生滚动条容器的内容部分也可以根据自定义滚动条的大小，对其进行微调。
基于以上描述，在监控模块02监测到原生滚动条容器的滚动事件时，控 制模块03检测该原生滚动条容器中是否有滚动条出现；在该原生滚动容器中 没有滚动条出现时，若是控制模块03已执行了增加原生滚动条容器宽度的操 作，则在原生滚动容器中没有滚动条出现时，控制模块03还原所述原生滚动 条容器的宽度，并去掉增加的所述右填充。
本发明实施例将原生滚动条容器增加一预设宽度值，并设置所述原生滚 动条容器为层叠样式；避免了针对部分浏览器在出现滚动条时，在鼠标拖拽 的情况下，出现滚动条无法隐藏的问题；同时，在该原生滚动条容器的右边 新增同等大小的右填充，具有保证新增宽度后原生滚动条被外层容器隐藏的 同时，原生滚动条容器的内容部分的宽度不变的有益效果。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体 意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或 者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还 包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情 况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、 方法、物品或者装置中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述 实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通 过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的 技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体 现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光 盘）中，该存储介质包括若干指令用以使得一台终端设备（可以是手机，计 算机，服务器，或者网络设备，或者图7所述的滚动条控制装置等）执行本 发明各个实施例所述的方法。
以上所述仅为本发明的优选实施例，并非因此限制其专利范围，凡是利 用本发明说明书及附图内容所作的等效结构或等效流程变换，直接或间接运 用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。