前言
在日常業(yè)務開發(fā)中,我們有時會遇到多個組件需要同步滾動的場景;例如在某個頁面中存在多個相關的數(shù)據(jù)表格,用戶在滾動其中一個表格時,其他表格也同步滾動保證數(shù)據(jù)行的對齊;這個功能在數(shù)據(jù)看板、儀表盤等多種場景下都很常見。
實現(xiàn)這種功能并非難事,主要思路為監(jiān)聽各個組件的滾動事件,當某個組件主動滾動后將自身的滾動狀態(tài)同步給其他組件;但這種實現(xiàn)方式背后存在嚴重的隱患:當某個組件接收到來自其他組件的主動滾動信息,并據(jù)此對自身的滾動狀態(tài)加以同步后,該組件會被動觸發(fā)滾動事件,并將自身的滾動信息傳遞給主動滾動組件;在這種情況下,極易造成死循環(huán),并在頁面上的表現(xiàn)為組件不?!俺榇ぁ?。
思路
要解決這個問題,我們需要理清思路;我們假設當前存在 A 和 B 兩個可滾動組件需要進行信息同步,按照上述解決方案編寫代碼后,整個事件的觸發(fā)流程如下:
A 主動滾動 -> B 同步 A 的滾動信息 -> A 同步 B 的滾動信息 -> A 主動滾動 -> 無限循環(huán)
而理想狀態(tài)下整個事件的觸發(fā)流程如下:
A 主動滾動 -> B 同步 A 的滾動信息 -> A 主動滾動 -> B 同步 A 的滾動信息
兩者中的區(qū)別在于,理想狀態(tài)下被動滾動的組件不會反復觸發(fā)滾動事件造成主動組件的滾動。要解決這個問題,我們可以通過在滾動事件中對引起滾動的來源進行區(qū)分,從而判斷是否要進行滾動信息同步。
Coding
首先編寫組件對應的滾動處理程序,當某個組件主動滾動時,scrollPart 為空,則將 scrollPart 設置為當前組件名稱;而主動滾動的組件再次觸發(fā)滾動時,將會同步滾動信息給其他組件,此時其他組件會被動觸發(fā)滾動事件;由于此前已將 scrollPart 設置為主動滾動事件的組件名稱,因此其他組件被動觸發(fā)滾動事件后會將 scrollPart 置空。
在這種情況下,即使主動滾動的組件被其他組件觸發(fā)被動滾動,也不會再次進行同步。
type ScrollPart = "compA" | "compB";
let scrollPart: ScrollPart; // 觸發(fā)原始滾動的組件名稱
// 根據(jù)組件名稱生成組件滾動事件的回調(diào)處理程序
const scrollCallbackFactory = (key: ScrollPart) => {
return () => {
if (!scrollPart) {
scrollPart = key;
} else if (scrollPart === key) {
syncScrollState();
} else {
scrollPart = undefined;
}
}
}
接下來需要添加事件監(jiān)聽程序和事件信息同步程序。
const compA = document.querySelector("#compA");
const compB = document.querySelector("#compB");
compA.addEventListener("scroll", scrollCallbackFactory("compA"));
compA.addEventListener("scroll", scrollCallbackFactory("compB"));
function syncScrollState() {
switch (scrollPart) {
case "compA":
compB.scrollTop = compA.scrollTop;
break;
case "compB":
compA.scrollTop = compB.scrollTop;
break;
}
}
這種處理組件同步的方法是可擴展的,支持橫向、縱向滾動以及多個組件滾動,只需給對應組件添加事件監(jiān)聽,并在 syncScrollState 函數(shù)里按照對應的組件同步滾動信息即可。