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

有效

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

本發明公開了一種表格橫向滾動條的粘滯方法、復用方法及計算機存儲介質，包括對需要粘滯滾動條的表格進行標識形成目標表格，并在識別到當前頁面存在目標表格時，基于當前頁面的可視區域創建并配置目標表格的粘滯滾動條；監聽當前頁面的滾動事件，當目標表格處于可視區域且其原生滾動條處于當前頁面的不可視區域時，顯示粘滯滾動條；監聽目標表格的粘滯滾動條的滾動事件，建立目標表格的粘滯滾動條與原生滾動條的關聯，通過操作粘滯滾動條實現目標表格的橫向滾動，通過設置粘滯滾動條，可需要的時候顯示而不需要或者不使用時隱藏或減淡，使頁面顯示更加干凈整潔，讓用戶可以更好的專注其關心的內容，且兼容性較高，可適配不同的設備。

技術領域

本發明涉及工業互聯網平臺的表單顯示技術領域，特別是涉及一種表格橫向滾動條的粘滯方法、復用方法及計算機存儲介質。

背景技術

工業互聯網平臺能夠把設備、生產線、工廠、供應商、產品和客戶緊密地連接融合起來，幫助企業優化業務流程或者管理流程，因此，平臺具有多樣化的產品板塊，例如設備管理、生產管理、倉儲管理等等。每個產品板塊中的項目板塊各式各樣，當某一業務表格的行列較多時，項目板塊中表格的橫向滾動條處于一個不合理的地方或者處于不可視區域，尤其是在小屏上展示數據時，更有可能出現前述問題，導致無法對表格進行拖動以實現遮擋內容的顯示。

目前，通常采用流行的UI框架，例如像Antd來處理這樣的問題，具體的采用粘性定位(position:sticky)進行處理，簡單來說，它主要是對滾動進行監聽，在滑動過程中，某個元素距離其父元素的距離達到sticky粘性定位的要求時，粘性定位就把該元素固定到適當的位置。但由于sticky元素效果完全受制于對應的父級元素，而其父級元素不能有除overflow:visible以外的其他overflow設置，否則sticky將會沒有效果。所以當項目中，父級元素存在其他overflow設置，單純的依靠粘性定位，將無法實現滾動條的粘滯。

發明內容

有鑒于此，本發明的目的在于提供一種表格橫向滾動條的粘滯方法、復用方法及計算機存儲介質，以解決現有技術中因子級元素的效果受制于其父級元素導致的父級元素配置改變后滾動條粘滯無法實現的問題。

為達到上述目的，本發明的第一方面提供一種表格橫向滾動條的粘滯方法，包括以下步驟：

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

S2：監聽當前頁面的滾動事件，當所述目標表格處于可視區域且其原生滾動條處于當前頁面的不可視區域時，顯示所述粘滯滾動條；

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

進一步的，所述步驟S1包括以下步驟：

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

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

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

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

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

進一步的，在步驟S104中，基于目標表格的可視寬度及實際寬度配置所述粘滯滾動條的具體方法為：