【技术实现步骤摘要】
表格横向滚动条的粘滞方法、复用方法及计算机存储介质
[0001]本专利技术涉及工业互联网平台的表单显示
，特别是涉及一种表格横向滚动条的粘滞方法、复用方法及计算机存储介质。
技术介绍
[0002]工业互联网平台能够把设备、生产线、工厂、供应商、产品和客户紧密地连接融合起来，帮助企业优化业务流程或者管理流程，因此，平台具有多样化的产品板块，例如设备管理、生产管理、仓储管理等等。每个产品板块中的项目板块各式各样，当某一业务表格的行列较多时，项目板块中表格的横向滚动条处于一个不合理的地方或者处于不可视区域，尤其是在小屏上展示数据时，更有可能出现前述问题，导致无法对表格进行拖动以实现遮挡内容的显示。
[0003]目前，通常采用流行的UI框架，例如像Antd来处理这样的问题，具体的采用粘性定位(position:sticky)进行处理，简单来说，它主要是对滚动进行监听，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时，粘性定位就把该元素固定到适当的位置。但由于sticky元素效果完全受制于对应的父...
【技术保护点】
【技术特征摘要】
1.一种表格横向滚动条的粘滞方法，其特征在于，包括以下步骤：S1：对需要粘滞滚动条的表格进行标识形成目标表格，并在识别到当前页面存在目标表格时，基于当前页面的可视区域创建并配置所述目标表格的粘滞滚动条，其中，所述可视区域位于当前页面内；S2：监听当前页面的滚动事件，当所述目标表格处于可视区域且其原生滚动条处于当前页面的不可视区域时，显示所述粘滞滚动条；S3：监听目标表格的粘滞滚动条的滚动事件，建立目标表格的粘滞滚动条与原生滚动条的关联，通过操作粘滞滚动条实现目标表格的横向滚动。2.根据权利要求1所述的表格横向滚动条的粘滞方法，其特征在于，所述步骤S1包括以下步骤：S101：基于用户的请求，确定需要粘滞滚动条的表格，并对每一表格分别赋予对应的唯一标识形成目标表格；S102：获取目标表格的唯一标识，根据获取到的唯一标识判断当前页面是否存在目标表格，若存在，则继续执行步骤S103，否则退出粘滞滚动条的创建及配置；S103：基于所述可视区域获取目标表格的可视宽度及实际宽度，判断所述目标表格的实际宽度是否大于可视宽度，若大于，则继续执行步骤S104，否则退出粘滞滚动条的创建及配置；S104：创建粘滞滚动条组件，并基于所述目标表格的可视宽度及实际宽度配置所述粘滞滚动条；S105：设置所述粘滞滚动条位于当前页面的预设位置处。3.根据权利要求2所述的表格横向滚动条的粘滞方法，其特征在于，在步骤S104中，基于目标表格的可视宽度及实际宽度配置所述粘滞滚动条的具体方法为：创建粘滞滚动条组件，所述粘滞滚动条组件具有一父级元素和一子级元素，将所述父级元素的宽度设置为目标表格的可视宽度，并设置内容为超出滚动；将所述子级元素的宽度设置为目标表格的实际宽度，且所述子级元素的宽度大于父级元素的宽度，得到所述粘滞滚动条。4.根据权利要求1所述的表格横向滚动条的粘滞方法，其特征在于，所述步骤S2包括以下步骤：S201：初始化页面，并获取目标表格的顶部至视图窗口顶部的初始顶部距离、目标表格的底部至视图窗口顶部的初始底部距离、当前页面的页面高度以及页面顶部距视图窗口顶部的页面偏移距离，其中，所述当前页面位于视图窗口内；S202：监听页面的滚动事件，实时获取页面滚动距离，其中，所述页面滚动距离为页面向上滚动时，初始页面中的内容向上超出当前页面上边界的高度，或者页面向下滚动时，初始页面中的内容向下超出当前页面下边界的高度；S203：基于所述目标表格的初始顶部距离、页面高度、页面滚动距离以及页面偏移距离，判断目标表格是否处于当前页面的可视区域内，若在，则继续执行步骤S204，否则隐藏所述目标表格的粘滞滚动条；S204：基于所述目标表格的初始底部距离、页面高度、页面滚动距离以及页面偏移距离，判断目标表格的原生滚动条是否处于当前页面的可视区域内，若不在，于页面的预设位
置显示所述粘滞滚动条，并继续执行步骤S205，否则隐藏所述目标表格的粘滞滚动条；S205：获取目标表格在当前状态下的原生滚动条的横向滚动距离，并将所述原生滚动条的横向滚动距离设置为所述粘滞滚动条的横向滚动距离。5....
【专利技术属性】
技术研发人员：向杰，高俊，
申请(专利权)人：重庆允丰科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。