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