CN114415919A - 表格横向滚动条的粘滞方法、复用方法及计算机存储介质 - Google Patents

Abstract

本发明公开了一种表格横向滚动条的粘滞方法、复用方法及计算机存储介质，包括对需要粘滞滚动条的表格进行标识形成目标表格，并在识别到当前页面存在目标表格时，基于当前页面的可视区域创建并配置目标表格的粘滞滚动条；监听当前页面的滚动事件，当目标表格处于可视区域且其原生滚动条处于当前页面的不可视区域时，显示粘滞滚动条；监听目标表格的粘滞滚动条的滚动事件，建立目标表格的粘滞滚动条与原生滚动条的关联，通过操作粘滞滚动条实现目标表格的横向滚动，通过设置粘滞滚动条，可需要的时候显示而不需要或者不使用时隐藏或减淡，使页面显示更加干净整洁，让用户可以更好的专注其关心的内容，且兼容性较高，可适配不同的设备。

Description

表格横向滚动条的粘滞方法、复用方法及计算机存储介质

技术领域

本发明涉及工业互联网平台的表单显示技术领域，特别是涉及一种表格横向滚动条的粘滞方法、复用方法及计算机存储介质。

背景技术

工业互联网平台能够把设备、生产线、工厂、供应商、产品和客户紧密地连接融合起来，帮助企业优化业务流程或者管理流程，因此，平台具有多样化的产品板块，例如设备管理、生产管理、仓储管理等等。每个产品板块中的项目板块各式各样，当某一业务表格的行列较多时，项目板块中表格的横向滚动条处于一个不合理的地方或者处于不可视区域，尤其是在小屏上展示数据时，更有可能出现前述问题，导致无法对表格进行拖动以实现遮挡内容的显示。

目前，通常采用流行的UI框架，例如像Antd来处理这样的问题，具体的采用粘性定位(position:sticky)进行处理，简单来说，它主要是对滚动进行监听，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时，粘性定位就把该元素固定到适当的位置。但由于sticky元素效果完全受制于对应的父级元素，而其父级元素不能有除overflow:visible以外的其他overflow设置，否则sticky将会没有效果。所以当项目中，父级元素存在其他overflow设置，单纯的依靠粘性定位，将无法实现滚动条的粘滞。

发明内容

有鉴于此，本发明的目的在于提供一种表格横向滚动条的粘滞方法、复用方法及计算机存储介质，以解决现有技术中因子级元素的效果受制于其父级元素导致的父级元素配置改变后滚动条粘滞无法实现的问题。

为达到上述目的，本发明的第一方面提供一种表格横向滚动条的粘滞方法，包括以下步骤：

S1：对需要粘滞滚动条的表格进行标识形成目标表格，并在识别到当前页面存在目标表格时，基于当前页面的可视区域创建并配置所述目标表格的粘滞滚动条，其中，所述可视区域位于当前页面内；

S2：监听当前页面的滚动事件，当所述目标表格处于可视区域且其原生滚动条处于当前页面的不可视区域时，显示所述粘滞滚动条；

S3：监听目标表格的粘滞滚动条的滚动事件，建立目标表格的粘滞滚动条与原生滚动条的关联，通过操作粘滞滚动条实现目标表格的横向滚动。

进一步的，所述步骤S1包括以下步骤：

S101：基于用户的请求，确定需要粘滞滚动条的表格，并对每一表格分别赋予对应的唯一标识形成目标表格；

S102：获取目标表格的唯一标识，根据获取到的唯一标识判断当前页面是否存在目标表格，若存在，则继续执行步骤S103，否则退出粘滞滚动条的创建及配置；

S103：基于所述可视区域获取目标表格的可视宽度及实际宽度，判断所述目标表格的实际宽度是否大于可视宽度，若大于，则继续执行步骤S104，否则退出粘滞滚动条的创建及配置；

S104：创建粘滞滚动条组件，并基于所述目标表格的可视宽度及实际宽度配置所述粘滞滚动条；

S105：设置所述粘滞滚动条位于当前页面的预设位置处。

进一步的，在步骤S104中，基于目标表格的可视宽度及实际宽度配置所述粘滞滚动条的具体方法为：

创建粘滞滚动条组件，所述粘滞滚动条组件具有一父级元素和一子级元素，将所述父级元素的宽度设置为目标表格的可视宽度，并设置内容为超出滚动；将所述子级元素的宽度设置为目标表格的实际宽度，且所述子级元素的宽度大于父级元素的宽度，得到所述粘滞滚动条。

进一步的，所述步骤S2包括以下步骤：

S201：初始化页面，并获取目标表格的顶部至视图窗口顶部的初始顶部距离、目标表格的底部至视图窗口顶部的初始底部距离、当前页面的页面高度以及页面顶部距视图窗口顶部的页面偏移距离，其中，所述当前页面位于视图窗口内；

S202：监听页面的滚动事件，实时获取页面滚动距离，其中，所述页面滚动距离为页面向上滚动时，初始页面中的内容向上超出当前页面上边界的高度，或者页面向下滚动时，初始页面中的内容向下超出当前页面下边界的高度；

S203：基于所述目标表格的初始顶部距离、页面高度、页面滚动距离以及页面偏移距离，判断目标表格是否处于当前页面的可视区域内，若在，则继续执行步骤S204，否则隐藏所述目标表格的粘滞滚动条；

S204：基于所述目标表格的初始底部距离、页面高度、页面滚动距离以及页面偏移距离，判断目标表格的原生滚动条是否处于当前页面的可视区域内，若不在，于页面的预设位置显示所述粘滞滚动条，并继续执行步骤S205，否则隐藏所述目标表格的粘滞滚动条；

S205：获取目标表格在当前状态下的原生滚动条的横向滚动距离，并将所述原生滚动条的横向滚动距离设置为所述粘滞滚动条的横向滚动距离。

进一步的，在步骤S203中，采用如下公式判断所述目标表格是否位于页面的可视区域内：

X＝Top-OffsetHeight-OffsetTop-ScrollTop；

其中：X定义为第一判断参数，Top为目标表格的顶部至视图窗口顶部的初始顶部距离，OffsetHeight为当前页面的页面高度，OffsetTop为页面偏移距离，ScrollTop为页面滚动距离；

在步骤S204中，采用如下公式判断所述目标表格的原生滚动条是否位于页面的可视区域内：

Y＝Bottom-OffsetHeight-OffsetTop-ScrollTop；

其中：Y定义为第二判断参数，Bottom为目标表格的底部至视图窗口顶部的初始底部距离，OffsetHeight为当前页面的页面高度，OffsetTop为页面偏移距离，ScrollTop为页面滚动距离。

进一步的，在步骤S203中，当所述第一判断参数小于零时，所述目标表格显示于所述可视区域内，在步骤S204中，当所述第二判断参数大于零时，所述目标表格的原生滚动条未显示于所述可视区域内。

进一步的，所述步骤S3包括以下步骤：

S301：监听粘滞滚动条的滚动事件，实时获取粘滞滚动条的横向滚动距离；

S302：基于用户的操作将实时获取到的所述粘滞滚动条的横向滚动距离设置为目标表格原生滚动条的横向滚动距离，建立粘滞滚动条与原生滚动条的关联。

为解决多个目标表格的粘滞滚动条的复用问题，本发明的第二方面提供一种表格横向滚动条的复用方法，包括以下步骤：

P1：获取当前页面中表格的唯一标识，并在当前页面中纵向存在多个表格时，确定一符合显示粘滞滚动条的表格作为目标表格；

P2：采用如上所述的表格横向滚动条的粘滞方法对所述目标表格进行粘滞滚动条的配置、显示、隐藏及关联；

P3：实时判断所述目标表格的是否符合显示粘滞滚动条的条件，当条件不成立时，隐藏所述目标表格的粘滞滚动条，并重新确定一符合条件的表格作为下一个目标表格重复执行步骤P2，实现粘滞滚动条的复用。

进一步的，在步骤P3中，确定下一个目标表格的具体方法为：

获取页面的滚动方向，根据所述滚动方向以及当前的目标表格，当页面向上滚动时，确定当前的目标表格下方的第一个表格作为所述下一个目标表格，当页面向下滚动时，确定当前的目标表格上方的第一个表格作为所述下一个目标表格，并重复执行步骤P2。

为实现上述表格横向滚动条的粘滞方法及表格横向滚动条的复用方法，本发明的第三方面提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的表格横向滚动条的粘滞方法以及实现如上所述的表格横向滚动条的复用方法。

本发明通过单独配置一粘滞滚动条组件，并设置粘滞滚动条的显示和隐藏的条件，通过同步监听页面滚动距离，可使得粘滞滚动条在符合显示条件时才显示于页面的预设位置，在不需要或者不使用时采用隐藏或减淡进行处理，进而使页面显示更加干净整洁，让用户可以更好的专注其关心的内容；同时，粘滞滚动条的数据来源于目标表格及其原生滚动条，通过同步监听粘滞滚动条的横向滚动距离，可将其值赋予原生滚动条，实现目标表格在粘滞滚动条的作用下同步滚动。另，本发明中由于粘滞滚动条组件仅具有一个子级元素，其宽度由目标表格的实际宽度确定，可兼容多种设备的不同情况，兼容性较高，且对于纵向多个目标表格的情况，仅需要改变粘滞滚动条的参数即可实现复用，无需增加新的粘滞滚动条组件，可简化配置过程，使用最少的元素实现横向滚动条的粘滞功能。

附图说明

图1为本发明的表格横向滚动条的粘滞方法、复用方法的界面示意图。

图2为本发明的表格横向滚动条的粘滞方法、复用方法的另一界面示意图。

图3为本发明实施例1的一种表格横向滚动条的粘滞方法的流程图。

图4为图3中步骤S1的流程图。

图5为图3中步骤S2的流程图。

图6为图5中步骤S203目标表格不在可视区域时粘滞滚动条隐藏的界面示意图。

图7为图5中步骤S204目标表格的原生滚动条不在可视区域时粘滞滚动条显示的界面示意图。

图8为图5中步骤S204目标表格的原生滚动条在可视区域时粘滞滚动条隐藏的界面示意图。

图9为图3中步骤S3的流程图。

图10为粘滞滚动条与原生生滚动条关联后的界面示意图。

图11为本发明实施例2的一种表格横向滚动条的复用方法的流程图。

图12为图11中步骤P3粘滞滚动条复用的界面示意图。

具体实施方式

下面通过具体实施方式进一步详细说明：

本发明通过对需要配置粘滞滚动条的表格赋予一个唯一标识，以区分目标表格与普通表格，并在识别到当前页面存在有目标表格时，触发对目标表格的可视宽度和实际宽度的获取，并基于目标表格的可视宽度和实际宽度创建和配置对应的粘滞滚动条，使粘滞滚动条的参数与目标表格及其原生滚动条的参数相对应；通过实时监听页面滚动距离，并结合目标表格的初始顶部距离和初始底部距离、页面高度以及页面顶部距视图窗口顶部的距离实时判断目标表格是否符合显示或隐藏粘滞滚动条的条件，判断时，仅滚动距离一个变量，可减少监听过程中的其他参数的获取及赋值，避免采用粘性定位时父级元素改变后无法实现粘滞滚动条；通过监听粘滞滚动条的横向滚动距离，建立目标表格的粘滞滚动条与原生滚动条的关联，实现在粘滞滚动条的作用下同步带动目标表格的横向滚动。

实施例1

在阐述本实施例之前，先对本实施例涉及的元素进行说明。如图1和图2所示，本实施例中涉及如下几个元素：视图窗口1、页面2、可视区域3、目标表格4以及粘滞滚动条5，其中，页面2位于所述视图窗口1内，同时可视区域3位于所述页面2内，目标表格4可显示于所述可视区域3内，也可存在于于可视区域3相对立的不可视区域3，粘滞滚动条5可显示于页面2一预设位置，也可对应在页面2中予以隐藏或淡化。

如图3所示，为本实施例的表格横向滚动条的粘滞方法的流程图。本实施例具体包括以下步骤：

S1：基于目标表格4，创建并配置粘滞滚动条5。

具体的，用户可根据需求确定是否需要对表格配置粘滞滚动条5，并对需要粘滞滚动条5的表格进行唯一标识的配置形成目标表格4；基于所述唯一标识，当识别到当前页面2存在目标表格4时，根据当前页面2的可视区域3创建并配置所述目标表格4的粘滞滚动条5。

如图4所示，所述步骤S1包括以下步骤：

S101：对表格赋予唯一标识。

基于用户的请求，确定需要配置粘滞滚动条5的表格，并对每一表格分别赋予对应的唯一标识形成目标表格4，所述唯一标识可对应目标表格4进行识别，以在后续配置时确定执行粘滞滚动条5配置的目标表格4。

S102：获取唯一表格，并判断页面2中是否存在目标表格4。

在当前页面2中获取目标表格4的唯一标识，根据获取到的唯一标识判断当前页面2是否存在目标表格4。当页面2中存在目标表格4时，则继续执行步骤S103，否则说明当前页面2不存在需要配置粘滞滚动条5的表格，则退出粘滞滚动条5的创建及配置，不执行任何操作。

S103：获取目标表格4的参数，判断该目标表格4是否符合粘滞滚动条5的创建及配置条件。

基于所述可视区域3获取目标表格4的可视宽度及实际宽度，判断所述目标表格4的实际宽度是否大于可视宽度，若大于，则继续执行步骤S104，否则退出粘滞滚动条5的创建及配置，不进行任何操作。

S104：创建粘滞滚动条5，并配置粘滞滚动条5的相关参数。

首先，创建一粘滞滚动条5组件，所述粘滞滚动条5组件包括一宽度可设置的滑块51以及一宽度与所述页面2适配的且可供所述滑块51滑动的导向条52。

然后，对所述粘滞滚动条5组件配置相关参数。具体的，在本实施例中，所述粘滞滚动条5组件具有一父级元素和一子级元素，将所述子级元素的宽度设置为目标表格4的实际宽度；将所述父级元素的宽度设置为目标表格4的可视宽度，同时基于实际需求还可以给父级元素设置一适当高度，以使得粘滞滚动条5可显示于页面2中，并设置父级元素的内容为超出滚动(即overflow：auto，此为一个css样式，定义为超出滚动，即在后续步骤中，当子级元素的宽度超过父级元素的宽度时会自动出现粘滞滚动条5)。在本实施例中，由于子级元素没有高度，且子级元素的宽度大于父级元素的宽度，这使得最终显示时只会展示一个粘滞滚动条5，且与目标表格4的原生滚动条6一致，使得所述粘滞滚动条5可兼容多种设备的不容情况，粘滞滚动条5的兼容性较强。

S105：将所述粘滞滚动条5设置于当前页面2的预设位置处。

具体的，根据实际需求或操作习惯将创建好的粘滞滚动条5设置于页面2中一个合理的位置，并显示或隐藏。在本实施例中，所述粘滞滚动条5位于页面2中对应可视区域3下方的位置处，以使粘滞滚动条5可以与目标表格4的原生滚动条6相对应。

S2：监听页面2的滚动事件，并在满足粘滞滚动条5显示或隐藏的条件时于页面2中显示或隐藏粘滞滚动条5。

具体的，监听当前页面2的滚动事件，当所述目标表格4处于可视区域3且其原生滚动条6处于当前页面2的不可视区域3时，显示所述粘滞滚动条5；当目标表格4处于不可视区域3时或目标表格4的原生滚动条6处于可视区域3时，隐藏所述粘滞滚动条5，以增加粘滞滚动条5使用的灵活性，使出现在可视区域3的目标表格4自始至终均只有一个可操作的滚动条(即粘滞滚动条5或原生滚动条6)，进而减少页面2上的多余组件，让用户可以专注于其关心的内容。

如图5所示，所述步骤S2包括以下步骤：

S201：获取目标表格4及页面2的初始参数。

初始化页面2，使页面2中所有的滚动条复位，即纵向滚动条的滑块51位于最上方而横向滚动条的滑块51位于最左边，然后获取各元素的初始参数，用于确定目标表格4的初始位置。具体的，所述初始参数包括：

Top：初始顶部距离，即对应元素的顶部至另一元素的顶部之间的距离，本实施例中具体为目标表格4的顶部至视图窗口1顶部之间的初始顶部距离；

Bottom：初始底部距离，对应元素的底部至另一元素的顶部之间的距离，本实施例中具体为目标表格4的底部至视图窗口1顶部之间的初始底部距离；

OffsetHeight：元素高度，即对应元素底部至元素顶部之间的距离，本实施例中具体为当前页面2的页面2高度；

OffsetTop：元素偏移距离，即对应元素相对于其父级元素顶部边界的偏移像素值，本实施例中具体为页面2顶部(或上边界)至视图窗口1顶部之间的页面2偏移距离。

S202：监听页面2的滚动事件，获取页面2滚动距离。

监听当前页面2的滚动事件，所述滚动事件具体包括页面2向上滚动和向下滚动两种情况，然后实时获取页面2滚动距离ScrollTop，所述页面2滚动距离具体为：当页面2向上滚动时，页面2中的内容位置变化后超出其初始位置时页面2上边界的高度，或者当页面2向下滚动时，页面2中的内容位置变化后超出其初始位置时页面2下边界的高度。

S203：基于初始参数和页面2滚动距离，判断目标表格4是否在可视区域3内。

基于所述目标表格4的初始顶部距离、页面2高度、页面2滚动距离以及页面2偏移距离，判断目标表格4是否处于当前页面2的可视区域3内，若在，则继续执行步骤S204，否则所述目标表格4不在所述可视区域3内，在所述页面2中隐藏所述目标表格4的粘滞滚动条5(如图6所示)。

在本实施例中，采用如下公式判断所述目标表格4是否位于页面2的可视区域3内：

X＝Top-OffsetHeight-OffsetTop-ScrollTop (1)

其中：将X定义为第一判断参数，用于判断所述目标表格4是否位于页面2的可视区域3内。即：

当所述第一判断参数X小于零时，即ScrollTop>Top-OffsetHeight-OffsetTop时，说明目标表格4出现在可视区域3内。具体来说，将(OffsetHeight+OffsetTop)二者的和视为视图窗口1顶部至页面2底部的距离：

若目标表格4的初始位置位于可视区域3内，目标表格4顶部至视图窗口1顶部的初始顶部距离Top始终小于(OffsetHeight+OffsetTop)，无论页面2是否滚动，ScrollTop>Top-OffsetHeight-OffsetTop始终是成立的，则可说明目标表格4出现在可视区域3内；

若目标表格4的初始位置没有位于可视区域3内，当页面2滚动时，在目标表格4出现在可视区域3之前，页面2滚动距离ScrollTop始终小于Top-OffsetHeight-OffsetTop，此时，直至目标表格4出现后，ScrollTop>Top-OffsetHeight-OffsetTop才成立，即可说明目标表格4出现在可视区域3内。

S204：基于初始参数和页面2滚动距离，判断是否显示或隐藏粘滞滚动条5。

基于所述目标表格4的初始底部距离、页面2高度、页面2滚动距离以及页面2顶部距视图窗口1顶部的距离，判断目标表格4的原生滚动条6是否处于当前页面2的可视区域3内，若不在，则在所述页面2中显示所述目标表格4的粘滞滚动条5(如图7所示)，然后继续执行步骤S205，否则所述目标表格4的原生滚动条6在所述可视区域3内，在所述页面2中隐藏所述目标表格4的粘滞滚动条5(如图8所示)。

在本实施例中，采用如下公式判断所述目标表格4的原生滚动条6是否位于页面2的可视区域3内：

Y＝Bottom-OffsetHeight-OffsetTop-ScrollTop (2)

其中：将Y定义为第二判断参数，用于判断所述目标表格4的原生滚动条6是否位于页面2的可视区域3内。即：

当所述第二判断参数Y小于零时，即ScrollTop<Bottom-OffsetHeight-OffsetTop时，说明目标表格4的原生滚动条6没有出现在可视区域3内。具体来说，参考上述步骤S203，将(OffsetHeight+OffsetTop)二者的和视为视图窗口1顶部至页面2底部的距离：

若目标表格4的原生滚动条6的初始位置没有位于可视区域3内，在原生滚动条6出现在可视区域3内之前，目标表格4底部至视图窗口1顶部的初始底部距离Bottom始终大于(OffsetHeight+OffsetTop)，则可说明目标表格4的原生滚动条6没有位于可视区域3内；

若目标表格4的原生滚动条6的初始位置位于可视区域3内，无论页面2是否滚动，ScrollTop始终大于Bottom-OffsetHeight-OffsetTop，即可说明目标表格4的原生滚动条6位于可视区域3内。

S205：获取原生滚动条6的横向滚动距离，赋值于粘滞滚动条5。

具体的，获取目标表格4在当前状态下的原生滚动条6的横向滚动距离ScrollLeft，并将所述原生滚动条6的横向滚动距离ScrollLeft设置为所述粘滞滚动条5的横向滚动距离ScrollLeft。如此，如果用户在配置粘滞滚动条5之前对目标表格4的原生滚动条6进行了操作，通过将获取到的原生滚动条6的横向滚动距离ScrollLeft赋值于粘滞滚动条5的横向滚动距离ScrollLeft，可使粘滞滚动条5的横向滚动距离ScrollLeft与原生滚动条6的横向滚动距离ScrollLeft保持一致。

S3：监听粘滞滚动条5的滚动事件，建立粘滞滚动条5与原生滚动条6的关联。

具体的，监听目标表格4的粘滞滚动条5的滚动事件，建立目标表格4的粘滞滚动条5与原生滚动条6的关联。由于粘滞滚动条5的相关参数根据目标表格4进行设置的，当对所述粘滞滚动条5与原生滚动条6进行关联后，可通过监听粘滞滚动条5的横向滚动距离ScrollLeft来将其设置为原生滚动条6(即目标表格4)的横向滚动距离ScrollLeft，从而建立起粘滞滚动条5与目标表格4原生滚动条6之间的关联，进而通过操作粘滞滚动条5实现目标表格4的横向滚动。

如图9所示，所述步骤S3包括以下步骤：

S301：监听粘滞滚动条5滚动事件，获取横向滚动距离。

首先，监听粘滞滚动条5的滚动事件，所述粘滞滚动条5的滚动事件具体包括所述粘滞滚动条5的滑块51向左滚动或者向右滚动。然后实时获取粘滞滚动条5的横向滚动距离ScrollLeft，在本实施例中，所述横向滚动距离ScrollLeft具体指滑块51滚动后，其左侧距离导向条52最左端的距离。

S302：赋值并建立粘滞滚动条5与原生滚动条6的关联。

根据用户操作粘滞滚动条5的距离(即实时获取到的粘滞滚动条5的横向滚动距离ScrollLeft)，将目标表格4的原生滚动条6的横向滚动距离ScrollLeft设置为与粘滞滚动条5的横向滚动距离ScrollLeft一样的值，建立目标表格4的粘滞滚动条5与原生滚动条6的关联(如图10所示)。由于在前述步骤中，粘滞滚动条5的相关参数是通过目标表格4的相关参数设置得到，所以，在此，通过操作粘滞滚动条5，使粘滞滚动条5滚动一距离也可同步带动目标表格4的原生滚动条6滚动相同的距离，以此实现表格横向滚动条的粘滞。

本实施例的表格横向滚动条的粘滞方法，通过单独配置一粘滞滚动条5组件，并设置粘滞滚动条5的显示和隐藏的条件，通过同步监听页面2滚动距离，可使得粘滞滚动条5在符合显示条件时才显示于页面2的预设位置，在不需要或者不使用时采用隐藏或减淡进行处理，实现了表格横向滚动条的粘滞，使目标表格4的横向滚动更加方便，在可视区域3中只要能看到一小部分目标表格4即可通过配置的粘滞滚动条5实现目标表格4的横向滚动；并且，粘滞滚动条5的参数来源于目标表格4，可通过同步监听粘滞滚动条5的横向滚动距离，可使粘滞滚动条5的滚动情况贴合目标表格4的原生滚动条6。

实施例2

如图11所示，为本实施例的表格横向滚动条的复用方法的流程图。本实施例的表格横向滚动条的复用方法基于实施例1的表格横向滚动条的粘滞方法实现，其可在页面2的可视区域3中纵向存在多个表格时通过对粘滞滚动条5相关参数的变更，实现一个粘滞滚动条5对纵向多个目标表格4的复用。本实施例的表格横向滚动条的复用方法，具体包括以下步骤：

P1：获取多个目标表格4的唯一标识，并确定符合条件的目标表格4。

具体的，获取当前页面2中表格的唯一标识，当获取到多个唯一标识时，则说明在当前页面2中纵向存在多个需要配置粘滞滚动条5的表格，然后根据各表格的参数确定一符合显示粘滞滚动条5的表格作为目标表格4。

P2：对目标表格4配置粘滞滚动条5。

具体的，采用实施例1的表格横向滚动条的粘滞方法对所述目标表格4进行粘滞滚动条5的配置、显示、隐藏及关联。具体过程请参考上述实施例1示出的内容，在此不做赘述。

P3：实时确定符合条件的目标表格4，对粘滞滚动条5进行复用。

具体的，随着页面2的滚动，实时判断所述目标表格4的是否仍然符合显示粘滞滚动条5的条件，当条件不成立时，隐藏所述目标表格4的粘滞滚动条5，并重新确定一符合粘滞滚动条5显示条件的表格作为下一个目标表格4重复执行步骤P2，实现粘滞滚动条5的复用。

在本实施例中，在确定下一个目标表格4时，通过获取页面2的滚动方向，根据所述滚动方向以及当前的目标表格4，当页面2向上滚动时，确定当前的目标表格4下方的第一个表格作为所述下一个目标表格4，当页面2向下滚动时，确定当前的目标表格4上方的第一个表格作为所述下一个目标表格4，并重复执行步骤P2，对所述粘滞滚动条5在当前页面2进行复用(如图12所示)。

本实施例的表格横向滚动条的复用方法，可在页面2中纵向存在多个需要粘滞滚动条5的目标表格4，对一满足显示粘滞滚动条5条件的目标表格4的粘滞滚动条5进行配置并显示，并在其不符合显示条件后，重新获取满足条件的目标表格4，显示其对应的粘滞滚动条5，实现粘滞滚动条5的复用。

作为本发明的另一实施例，还提供一种计算机存储介质，其上存储有计算机程序，通过所述计算机执行计算机程序时，可执行上述实施例1的表格横向滚动条的粘滞方法以及实施例2的表格横向滚动条的复用方法的部分或全部操作，从而实现上述实施例的功能。

以上所述的仅是本发明的实施例，方案中公知的具体结构及特性等常识在此未作过多描述。应当指出，对于本领域的技术人员来说，在不脱离本发明结构的前提下，还可以作出若干变形和改进，这些也应该视为本发明的保护范围，这些都不会影响本发明实施的效果和本发明的实用性。

Claims (10)

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.根据权利要求4所述的表格横向滚动条的粘滞方法，其特征在于，在步骤S203中，采用如下公式判断所述目标表格是否位于页面的可视区域内：

X＝Top-OffsetHeight-OffsetTop-ScrollTop；

其中：X定义为第一判断参数，Top为目标表格的顶部至视图窗口顶部的初始顶部距离，OffsetHeight为当前页面的页面高度，OffsetTop为页面偏移距离，ScrollTop为页面滚动距离；

在步骤S204中，采用如下公式判断所述目标表格的原生滚动条是否位于页面的可视区域内：

Y＝Bottom-OffsetHeight-OffsetTop-ScrollTop；

其中：Y定义为第二判断参数，Bottom为目标表格的底部至视图窗口顶部的初始底部距离，OffsetHeight为当前页面的页面高度，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任一项所述的表格横向滚动条的复用方法。

Images