滚动条控制方法及装置的制造方法
【技术领域】
[0001]本发明涉及浏览器领域，尤其涉及一种滚动条控制方法及装置。
【背景技术】
[0002]对于浏览器提供的原生滚动条无法自定义样式的缺陷，目前采用的解决方式是利用网页脚本对浏览器新增自定义滚动条，以模拟原生滚动条的行为和样式。上述这种方案解决了原生滚动条无法自定义样式的缺陷，但同时破坏了原生滚动条的事件体系及一些默认行为，比如网页可以监听的滚动事件、滚动事件的冒泡及鼠标滚轮滚动、上下键触发的滚动、嵌套滚动问题等原生滚动条常用的事件行为，该自定义滚动条都可能无法提供；若使用网页脚本来完整模拟原生滚动条的所有行为，则代码开发成本很高且代码量大，而大量的代码将导致用户加载网页的速度变得十分缓慢，用户满意度低。
【发明内容】
[0003]鉴于此，有必要提供一种滚动条控制方法及装置，以实现自定义滚动条的同时保留原生滚动条的事件体系和默认行为。
[0004]本发明实施例公开了一种滚动条控制方法，包括以下步骤:
[0005]将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；
[0006]监控所述原生滚动条容器的滚动事件；
[0007]根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致。
[0008]本发明实施例还公开了一种滚动条控制装置，包括:
[0009]设置模块，用于将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；
[0010]监控模块，用于监控所述原生滚动条容器的滚动事件；
[0011]控制模块，用于根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致。
[0012]本发明实施例将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；监控所述原生滚动条容器的滚动事件；根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致；具有实现自定义滚动条的同时，保留原生滚动条的事件体系和默认行为有益效果，且实现代码简单，丝毫不影响用户加载网页的速度。
【附图说明】
[0013]图1是本发明滚动条控制方法第一实施例流程示意图；
[0014]图2为一具体应用场景中显不的滚动条一实施例场景不意图；
[0015]图3是本发明滚动条控制方法第二实施例流程示意图；
[0016]图4是本发明滚动条控制方法第三实施例流程示意图；
[0017]图5是本发明滚动条控制方法中，根据原生滚动条操作自定义滚动条第一实施例流程示意图；
[0018]图6是本发明滚动条控制方法中，根据原生滚动条操作自定义滚动条第二实施例流程示意图；
[0019]图7是本发明滚动条控制装置一实施例功能模块示意图。
[0020]本发明实施例目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
【具体实施方式】
[0021]以下结合说明书附图及具体实施例进一步说明本发明的技术方案。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0022]图1是本发明滚动条控制方法第一实施例流程示意图；如图1所示，本发明滚动条控制方法包括以下步骤:
[0023]步骤S01、将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；
[0024]本发明实施例中，通过在原生滚动条所在的容器的外层包裹一个容器，并作为承载自定义滚动条及隐藏子容器的原生滚动条的容器，如此，即可实现自定义滚动条样式的同时，保留浏览器原生滚动条的事件体系及默认行为。
[0025]本实施例中，浏览器利用HTML (Hypertext Markup Language,超文本标记语言)的块元素(比如div元素)作为预设的一外层容器，将原生滚动条所在的原生滚动条容器嵌套到该外层容器中。
[0026]步骤S02、监控所述原生滚动条容器的滚动事件；
[0027]步骤S03、根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致。
[0028]浏览器实时监控基于原生滚动条容器所触发的操作事件，在该原生滚动条容器初始化及每次原生滚动条容器有内容更新时，检测该原生滚动条容器是否有滚动事件触发；浏览器根据原生滚动条容器对应的操作事件，识别是否有滚动条出现。也可以理解为，浏览器根据原生滚动条容器对应的显示内容的更新或者其他操作事件，识别是否触发了原生滚动条对应的滚动事件。
[0029]在浏览器监控到有原生滚动条对应的滚动事件触发时，则根据触发的原生滚动条对应的滚动事件，浏览器获取该原生滚动条基于原始滚动条容器所滚动的具体位置；根据获取的该原生滚动条基于原始滚动条容器所滚动的具体位置，计算获取自定义滚动条基于外层容器的具体滚动位置，这其中包括原生滚动条的滚动方向、滚动位置，及对应的自定义滚动条根据原生滚动条的变化，自定义滚动条自身的滚动方向和滚动位置。根据原生滚动条容器对应的滚动事件，操作该外层容器中自定义滚动条的滚动，使得该自定义滚动条与原生滚动条的滚动保持一致。
[0030]采用上述方式，丝毫不影响浏览器原生滚动条的事件体系及默认行为。图2为一具体应用场景中显示的滚动条一实施例场景示意图，在图2所示的网页中，比如浏览器监听到鼠标滚轮滚动、上下方向按键的按下这些行为事件时，根据监听到的具体行为事件，浏览器操作原生滚动条执行对应的滚动操作，从而可以联动显示的自定义滚动条执行与原生滚动条一致的滚动；在用户享用自定义滚动条样式的同时，丝毫不影响原生滚动条的事件体系及默认行为。
[0031]本发明实施例将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；监控所述原生滚动条容器的滚动事件；根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致；具有实现自定义滚动条的同时，保留原生滚动条的事件体系和默认行为有益效果，且实现代码简单，丝毫不影响用户加载网页的速度；提高了人机的可交互性操作。
[0032]图3是本发明滚动条控制方法第二实施例流程示意图；本实施例与图1所述实施例的区别是，本发明实施例浏览器监控所述原生滚动条容器的滚动事件时，若监控到原生滚动条容器有内容更新时，需要识别外层容器是否存在自定义滚动条。
[0033]基于图1、图2所述实施例的具体描述，如图3所示，本发明滚动条控制方法在图1所述实施例的“步骤S02、监控所述原生滚动条容器的滚动事件”之后，在“步骤S03、根据所述原生滚动条容器对应的滚动事件，操作所述外层容器中自定义滚动条的位置，使所述自定义滚动条与所述原生滚动条保持一致”之前，还包括:
[0034]步骤S101、识别所述外层容器是否存在自定义滚动条；若是，则执行步骤S102 ;若否，则执行步骤S103;
[0035]步骤S102、显示自定义滚动条；
[0036]步骤S103、创建自定义滚动条；将创建的自定义滚动条嵌入所述外层容器中，并将所述自定义滚动条定位至与所述原生滚动条的位置对应的所述外层容器的右边界处。
[0037]浏览器监控到原生滚动条容器有内容更新时，识别该原生滚动条容器所嵌套的外层容器是否存在自定义滚动条，即在该外层容器中，识别是否存在有自定义显示样式的自定义滚动条。若该外层容器中存在自定义滚动条，则直接将外层容器中存在的自定义滚动条显示出来，供用户查看或使用；若该外层容器中不存在自定义滚动条，则浏览器按照预定的滚动条创建规则及滚动条的显示样式，新创建一自定义滚动条，并将创建好的自定义滚动条嵌入该外层容器中。为了保持自定义滚动条与原生滚动条的一致性，进一步地也为了满足用户的使用习惯，将新创建的该自定义滚动条定位至与原生滚动条的位置对应的外层容器的右边界处。
[0038]本发明实施例通过识别是否存在自定义滚动条，在存在自定义滚动条时将其进行显示,在不存在自定义滚动条时创建自定义滚动条，具有根据滚动条的显示样式灵活创建自定义滚动条的有益效果。
[0039]图4是本发明滚动条控制方法第三实施例流程示意图；本发明实施例与图1或者图3所述实施例的区别是，浏览器在监控原生滚动条容器的操作事件的同时，监听用户基于自定义滚动条所触发的操作事件。
[0040]基于图1、图2和图3所述实施例的具体描述，如图4所示，本发明滚动条控制方法包括以下步骤:
[0041]步骤S01、将浏览器原生滚动条所在的原生滚动条容器嵌套到预设的一外层容器中；
[0042]本发明实施例中，通过在原生滚动条所在的容器的外层包裹一个容器，并作为承载自定义滚动条及隐藏子容器的原生滚动条的容器，如此，即可实现自定义滚动条样式的同时，保留浏览器原生滚动条的事件体系及默认行为。
[0043]本实施例中，浏览器利用HTML的块元素(比如div元素)作为预设的一外层容器，将原生滚动条所在的原生滚动条容器嵌套到该外层容器中。