[發明專利]表格橫向滾動條的粘滯方法、復用方法及計算機存儲介質

有效

• 申請號: 202210074091.8
• 申請日: 2022-01-21
• 公開（公告）號: CN114415919B
• 公開（公告）日: 2023-03-24
• 發明（設計）人: 向杰;高俊
• 申請（專利權）人: 重慶允豐科技有限公司
• 主分類號: G06F3/04847
• 分類號: G06F3/04847;G06F3/0485;G06F9/451
• 代理公司: 重慶樂泰知識產權代理事務所(普通合伙) 50221
• 代理人: 劉念芝

1.一種表格橫向滾動條的粘滯方法，其特征在于，包括以下步驟：

S1：對需要粘滯滾動條的表格進行標識形成目標表格，并在識別到當前頁面存在目標表格時，基于當前頁面的可視區域創建并配置所述目標表格的粘滯滾動條，其中，所述可視區域位于當前頁面內；

S2：獲取目標表格頂部和底部分別至視圖窗口頂部的初始頂部距離和初始底部距離、當前頁面的頁面高度及頁面頂部距視圖窗口頂部的頁面偏移距離，監聽當前頁面的滾動事件，并獲取頁面滾動距離，根據初始頂部距離、初始底部距離、頁面高度、頁面滾動距離以及頁面偏移距離進行綜合判斷，當所述目標表格處于可視區域且其原生滾動條處于當前頁面的不可視區域時，顯示所述粘滯滾動條；

所述步驟S2包括以下步驟：

S201：初始化頁面，并獲取目標表格的頂部至視圖窗口頂部的初始頂部距離、目標表格的底部至視圖窗口頂部的初始底部距離、當前頁面的頁面高度以及頁面頂部距視圖窗口頂部的頁面偏移距離，其中，所述當前頁面位于視圖窗口內；

S202：監聽頁面的滾動事件，實時獲取頁面滾動距離，其中，所述頁面滾動距離為頁面向上滾動時，初始頁面中的內容向上超出當前頁面上邊界的高度，或者頁面向下滾動時，初始頁面中的內容向下超出當前頁面下邊界的高度；

S203：基于所述目標表格的初始頂部距離、頁面高度、頁面滾動距離以及頁面偏移距離，判斷目標表格是否處于當前頁面的可視區域內，若在，則繼續執行步驟S204，否則隱藏所述目標表格的粘滯滾動條；

在步驟S203中，采用如下公式判斷所述目標表格是否位于頁面的可視區域內：

X=Top-OffsetHeight-OffsetTop-ScrollTop；

其中：X定義為第一判斷參數，Top為目標表格的頂部至視圖窗口頂部的初始頂部距離，OffsetHeight為當前頁面的頁面高度，OffsetTop為頁面偏移距離，ScrollTop為頁面滾動距離；

S204：基于所述目標表格的初始底部距離、頁面高度、頁面滾動距離以及頁面偏移距離，判斷目標表格的原生滾動條是否處于當前頁面的可視區域內，若不在，于頁面的預設位置顯示所述粘滯滾動條，并繼續執行步驟S205，否則隱藏所述目標表格的粘滯滾動條；

在步驟S204中，采用如下公式判斷所述目標表格的原生滾動條是否位于頁面的可視區域內：

Y=Bottom-OffsetHeight-OffsetTop-ScrollTop；

其中：Y定義為第二判斷參數，Bottom為目標表格的底部至視圖窗口頂部的初始底部距離，OffsetHeight為當前頁面的頁面高度，OffsetTop為頁面偏移距離，ScrollTop為頁面滾動距離；

S205：獲取目標表格在當前狀態下的原生滾動條的橫向滾動距離，并將所述原生滾動條的橫向滾動距離設置為所述粘滯滾動條的橫向滾動距離；

S3：監聽目標表格的粘滯滾動條的滾動事件，建立目標表格的粘滯滾動條與原生滾動條的關聯，通過操作粘滯滾動條實現目標表格的橫向滾動。

2.根據權利要求1所述的表格橫向滾動條的粘滯方法，其特征在于，所述步驟S1包括以下步驟：

S101：基于用戶的請求，確定需要粘滯滾動條的表格，并對每一表格分別賦予對應的唯一標識形成目標表格；

S102：獲取目標表格的唯一標識，根據獲取到的唯一標識判斷當前頁面是否存在目標表格，若存在，則繼續執行步驟S103，否則退出粘滯滾動條的創建及配置；

S103：基于所述可視區域獲取目標表格的可視寬度及實際寬度，判斷所述目標表格的實際寬度是否大于可視寬度，若大于，則繼續執行步驟S104，否則退出粘滯滾動條的創建及配置；

S104：創建粘滯滾動條組件，并基于所述目標表格的可視寬度及實際寬度配置所述粘滯滾動條；

S105：設置所述粘滯滾動條位于當前頁面的預設位置處。

3.根據權利要求2所述的表格橫向滾動條的粘滯方法，其特征在于，在步驟S104中，基于目標表格的可視寬度及實際寬度配置所述粘滯滾動條的具體方法為：

創建粘滯滾動條組件，所述粘滯滾動條組件具有一父級元素和一子級元素，將所述父級元素的寬度設置為目標表格的可視寬度，并設置內容為超出滾動；將所述子級元素的寬度設置為目標表格的實際寬度，且所述子級元素的寬度大于父級元素的寬度，得到所述粘滯滾動條。