(19)中华 人民共和国 国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210074091.8 (22)申请日 2022.01.21 (71)申请人 重庆允丰科技有限公司 地址 401320 重庆市巴南区鱼洞街道新兴 路38号附9号 (72)发明人 向杰　高俊　 (74)专利代理 机构 重庆乐泰知识产权代理事务 所(普通合伙) 50221 代理人 刘念芝 (51)Int.Cl. G06F 3/04847(2022.01) G06F 3/0485(2022.01) G06F 9/451(2018.01) (54)发明名称 表格横向滚动条的粘滞方法、 复用方法及计 算机存储介质 (57)摘要 本发明公开了一种表格横向滚动条的粘滞 方法、 复用方法及计算机存储介质， 包括对需要 粘滞滚动条的表 格进行标识形成目标表格， 并在 识别到当前页面存在目标表格时， 基于当前页面 的可视区域创建并配置目标表格的粘滞滚动条； 监听当前页面的滚动事件， 当目标表格处于可视 区域且其原生滚动条处于当前页面的不可视区 域时， 显示粘滞滚动条； 监听目标表格的粘滞滚 动条的滚动事件， 建立目标表格的粘滞滚动条与 原生滚动条的关联， 通过操作粘滞滚动条实现目 标表格的横向滚动， 通过设置粘滞滚动条， 可需 要的时候显示而不需要或者不使用时隐藏或减 淡， 使页面显示更加干净整洁， 让用户可 以更好 的专注其关心的内容， 且兼容性较高， 可适配不 同的设备。 权利要求书2页 说明书9页 附图6页 CN 114415919 A 2022.04.29 CN 114415919 A 1.一种表格横向滚动条的粘滞方法， 其特 征在于， 包括以下步骤： S1： 对需要粘滞滚动条的表格进行标识形成目标表格， 并在识别到当前页面存在目标 表格时， 基于 当前页面的可视区域创建 并配置所述目标表格的粘滞滚动条， 其中， 所述可视 区域位于当前页面内； S2： 监听当前页面的滚动事件， 当所述目标表格处于可视区域且其原生滚动条处于当 前页面的不可视区域时， 显示所述粘滞滚动条； S3： 监听目标表格的粘滞滚动条的滚动事件， 建立目标表格的粘滞滚动条与原生滚动 条的关联， 通过操作粘滞滚动条实现目标表格的横向滚动。 2.根据权利要求1所述的表格横向滚动条的粘滞方法， 其特征在于， 所述步骤S1包括以 下步骤： S101： 基于用户的请求， 确定需要粘滞滚动条的表格， 并对每一表格分别赋予对应的唯 一标识形成目标表格； S102： 获取目标表格的唯一标识， 根据获取到的唯一标识判断当前页面是否存在目标 表格， 若存在， 则继续执 行步骤S10 3， 否则退 出粘滞滚动条的创建及配置； S103： 基于所述可视区域获取目标表格的可视宽度及实际宽度， 判断所述目标表格的 实际宽度是否大于可视宽度， 若 大于， 则继续执行步骤S104， 否则退出粘滞滚动条的创建及 配置； S104： 创建粘滞滚动条组件， 并基于所述目标表格的可视宽度及实际宽度配置所述粘 滞滚动条； S105： 设置所述粘滞滚动条位于当前页面的预设位置处。 3.根据权利要求2所述的表格横向滚动条的粘滞方法， 其特征在于， 在步骤S104中， 基 于目标表格的可视 宽度及实际宽度配置所述粘滞滚动条的具体方法为： 创建粘滞滚动条组件， 所述粘滞滚动条组件具有一父级元素和一子级元素， 将所述父 级元素的宽度设置为 目标表格的可视宽度， 并设置内容为超出滚动； 将所述子级元素 的宽 度设置为 目标表格的实际宽度， 且所述子级元素 的宽度大于父级元素 的宽度， 得到所述粘 滞滚动条。 4.根据权利要求1所述的表格横向滚动条的粘滞方法， 其特征在于， 所述步骤S2包括以 下步骤： S201： 初始化页面， 并获取目标表格的顶部至视图窗口顶部的初始顶部距离、 目标表格 的底部至视图窗口顶部的初始底部距离、 当前页面的页面高度以及页面顶部距视图窗口顶 部的页面偏移 距离， 其中， 所述当前页面 位于视图窗口内； S202： 监听页面的滚动事件， 实时获取页面滚动距离， 其中， 所述页面滚动距离为页面 向上滚动时， 初始页面中的内容向上超 出当前页面上边界的高度， 或者页面向下滚动时， 初 始页面中的内容向下超出当前页面下边界的高度； S203： 基于所述目标表格的初始顶部距离、 页面高度、 页面滚动距离以及页面偏移距 离， 判断目标表格是否处于当前页面的可视区域内， 若在， 则继续执行步骤S204， 否则隐藏 所述目标表格的粘滞滚动条； S204： 基于所述目标表格的初始底部距离、 页面高度、 页面滚动距离以及页面偏移距 离， 判断目标表格的原 生滚动条是否处于 当前页面的可视区域内， 若不在， 于页面的预设位权　利　要　求　书 1/2 页 2 CN 114415919 A 2置显示所述粘滞滚动条， 并继续执 行步骤S20 5， 否则隐藏所述目标表格的粘滞滚动条； S205： 获取目标表格在当前状态下的原生滚动条的横向滚动距离， 并将所述原生滚动 条的横向滚动距离设置为所述粘滞滚动条的横向滚动距离 。 5.根据权利要求4所述的表格横向滚动条的粘滞方法， 其特征在于， 在步骤S203中， 采 用如下公式判断所述目标表格是否位于页面的可视区域内： X＝Top‑OffsetHeight ‑OffsetTop‑ScrollTop； 其中： X定义为第一判断参数， Top为目标表格的顶部至视图窗口顶部的初始顶部距离， OffsetHeight为当前页面的页面高度， OffsetTop为页面偏移距离， ScrollTop为页面滚动 距离； 在步骤S204中， 采用如下公式判断所述目标表格的原生滚动条是否位于页面的可视区 域内： Y＝Bottom‑OffsetHeight ‑OffsetTop‑ScrollTop； 其中： Y定义为第二判断参数， Bottom为目标表格的底部至视图窗口顶部的初始底部距 离， Offset Height为当前页面的页面高度， OffsetTop为页面偏移距离， ScrollTop为页面滚 动距离。 6.根据权利要求5所述的表格横向滚动条的粘滞方法， 其特征在于， 在步骤S203中， 当 所述第一判断参数小于零时， 所述目标表格显示于所述可视区域内， 在步骤S204中， 当所述 第二判断参数 大于零时， 所述目标表格的原生滚动条 未显示于所述可视区域内。 7.根据权利要求1所述的表格横向滚动条的粘滞方法， 其特征在于， 所述步骤S3包括以 下步骤： S301： 监听粘滞滚动条的滚动事 件， 实时获取粘滞滚动条的横向滚动距离； S302： 基于用户的操作将实时获取到的所述粘滞滚动条的横向滚动距离设置为目标表 格原生滚动条的横向滚动距离， 建立粘滞滚动条与原生滚动条的关联。 8.一种表格横向滚动条的复用方法， 其特 征在于， 包括以下步骤： P1： 获取当前页面中表格的唯一标识， 并在当前页面中纵向存在多个表格时， 确定一符 合显示粘滞滚动条的表格作为目标表格； P2： 采用如权利要求1 ‑7任一项所述的表格横向滚动条的粘滞方法对所述目标表格进 行粘滞滚动条的配置、 显示、 隐藏及关联； P3： 实时判断所述目标表格的是否符合显示粘滞滚动条的条件， 当条件不成立 时， 隐藏 所述目标表格的粘滞滚动条， 并重新确定一符合条件的表格作为下一个目标表格重复执行 步骤P2， 实现粘滞滚动条的复用。 9.根据权利要求8所述的表格横向滚动条的复用方法， 其特征在于， 在步骤P3中， 确定 下一个目标表格的具体方法为： 获取页面的滚动方向， 根据 所述滚动方向 以及当前的目标表格， 当页面向上滚动时， 确 定当前的目标表格下方的第一个表格作为所述下一个目标表格， 当页面向下滚动时， 确定 当前的目标表格上 方的第一个表格作为所述下一个目标表格， 并重复执 行步骤P2。 10.一种计算机存储介质， 其上存储有计算机程序， 其特征在于， 所述计算机程序被处 理器执行时实现如权利要求 1‑7任一项所述的表格横向滚动条的粘滞方法以及实现如权利 要求8‑9任一项所述的表格横向滚动条的复用方法。权　利　要　求　书 2/2 页 3 CN 114415919 A 3