技术摘要：
本申请公开了一种实现滚动指示器的方法、装置、电子设备及存储介质，该方法包括获取页面文档高度、页面文档宽度和当前可视区域高度；将页面文档高度与当前可视区域高度做差处理，得到高度差值；基于高度差值和页面文档宽度，创建覆盖在页面文档的背景层；调用图像渐变  全部
背景技术：
Scroll  Indicator称之为滚动指示器，用于表征当前可视区域距离页面顶部的占 比。滚动指示器可以在用户垂直滚动内容时，在页面顶部实现进度条的效果，例如，当内容 滚动到页面最低端时，进度条效果填满整个进度条。 现有技术中，在页面中实现滚动指示器通常采用JavaScript(多范式、解释型的编 程语言，简称JS)计算的方式实现。在实现滚动指示器时，实时监控页面内容的滚动事件，并 获取屏幕高度和页面中显示的文档高度，利用JS进行计算，来确定滚动时对应的文档进度。 但是，采用JS方法进行计算时，如果页面文档高度较高，会导致计算量较大，使得 实现代码相对复杂，比较消耗资源。
技术实现要素：
本申请提供了一种实现滚动指示器的方法、装置、电子设备及存储介质，以解决现 有的实现方法的实现过程较为复杂的问题。 第一方面，本申请提供了一种实现滚动指示器的方法，包括以下步骤： 获取页面文档高度、页面文档宽度和当前可视区域高度，所述页面文档高度是指 页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文档的总宽度，所述当 前可视区域高度是指页面中可以看到部分文档对应的窗口高度； 将所述页面文档高度与所述当前可视区域高度做差处理，得到高度差值； 基于所述高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，所述背 景层的高度为高度差值，所述背景层的宽度为页面文档宽度； 调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，所述背景图片的 高度与所述背景层的高度相同； 调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的高度小于所述背景 图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用于显示进度条。 进一步地，所述背景层为透明的底层；以及，所述调用图像渐变属性，对所述背景 层进行上色处理，得到背景图片，包括： 在所述背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区 域，所述目标进度展示区域位于页面文档的左下角； 调用图像渐变属性，对所述目标进度展示区域进行上色处理，得到背景图片，所述 背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述透明的空闲区域位于 所述页面文档的右上角。 进一步地，所述基于高度差值和所述页面文档宽度，创建覆盖在页面文档的背景 4 CN 111596853 A 说　明　书 2/7 页 层，包括： 以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面 文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。 进一步地，所述调用伪元素，创建位于所述背景图片表面的蒙层，包括： 获取预先设置的进度条的宽度，所述进度条位于所述页面文档的顶部； 基于所述背景图片的高度和所述进度条的宽度，计算差值； 调用所述伪元素，将所述差值作为目标高度，以所述背景图片的宽度作为目标宽 度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙层，所述蒙层与所述 背景图片形成预留区域，所述预留区域用于展示进度条。 第二方面，本申请提供的一种实现滚动指示器的装置，包括： 高度值获取模块，用于获取页面文档高度、页面文档宽度和当前可视区域高度，所 述页面文档高度是指页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文 档的总宽度，所述当前可视区域高度是指页面中可以看到部分文档对应的窗口高度； 计算模块，用于将所述页面文档高度与所述当前可视区域高度做差处理，得到高 度差值； 背景层创建模块，用于基于所述高度差值和所述页面文档宽度，创建覆盖在页面 文档的背景层，所述背景层的高度为高度差值，所述背景层的宽度为页面文档宽度； 上色处理模块，用于调用图像渐变属性，对所述背景层进行上色处理，得到背景图 片，所述背景图片的高度与所述背景层的高度相同； 蒙层创建模块，用于调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的 高度小于所述背景图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用 于显示进度条。 进一步地，所述背景层为透明的底层；以及，所述上色处理模块，包括： 区域划分单元，用于在所述背景层中，将从左上到右下形成的直角三角形区域作 为目标进度展示区域，所述目标进度展示区域位于页面文档的左下角； 上色处理单元，用于调用图像渐变属性，对所述目标进度展示区域进行上色处理， 得到背景图片，所述背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述 透明的空闲区域位于所述页面文档的右上角。 进一步地，所述背景层创建模块，还用于： 以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面 文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。 进一步地，所述蒙层创建模块，包括： 宽度获取单元，用于获取预先设置的进度条的宽度，所述进度条位于所述页面文 档的顶部； 差值计算单元，用于基于所述背景图片的高度和所述进度条的宽度，计算差值； 蒙层创建单元，用于调用所述伪元素，将所述差值作为目标高度，以所述背景图片 的宽度作为目标宽度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙 层，所述蒙层与所述背景图片形成预留区域，所述预留区域用于展示进度条。 第三方面，本申请提供的一种电子设备，包括： 5 CN 111596853 A 说　明　书 3/7 页 存储器，用于存储程序指令； 处理器，用于调用并执行所述存储器中的程序指令，以实现第一方面所述的实现 滚动指示器的方法。 第四方面，本申请提供的一种存储介质，所述存储介质中存储有计算机程序，当实 现滚动指示器的装置的至少一个处理器执行所述计算机程序时，实现滚动指示器的装置执 行第一方面所述的实现滚动指示器的方法。 由以上技术方案可知，本发明实施例提供的一种实现滚动指示器的方法、装置、电 子设备及存储介质，该方法包括获取页面文档高度、页面文档宽度和当前可视区域高度；将 页面文档高度与当前可视区域高度做差处理，得到高度差值；基于高度差值和页面文档宽 度，创建覆盖在页面文档的背景层；调用图像渐变属性，对背景层进行上色处理，得到背景 图片。调用伪元素，创建位于背景图片表面的蒙层，蒙层的高度小于背景图片的高度，蒙层 与背景图片形成预留区域，预留区域用于显示进度条。可见，本发明提供的方法，无需进行 大量的计算，实现代码简单，通过创建高度不同的背景层和蒙层，并在背景层中添加颜色， 实现滚动指示器中进度条的显示，过程更为简单。 附图说明 为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简 单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下， 还可以根据这些附图获得其他的附图。 图1为本发明实施例提供的实现滚动指示器的方法的流程图； 图2为本发明实施例提供的得到背景图片的方法流程图； 图3为本发明实施例提供的背景图片的示意图； 图4为本发明实施例提供的创建蒙层的方法流程图； 图5(a)为本发明实施例提供的在开始浏览时进度条的示意图； 图5(b)为本发明实施例提供的在浏览中途时进度条的示意图； 图6为本发明实施例提供的实现滚动指示器的装置的结构框图； 图7为本发明实施例提供的电子设备的硬件结构示意图。