前言

在日常業(yè)務(wù)開發(fā)中，我們有時(shí)會遇到多個(gè)組件需要同步滾動的場景；例如在某個(gè)頁面中存在多個(gè)相關(guān)的數(shù)據(jù)表格，用戶在滾動其中一個(gè)表格時(shí)，其他表格也同步滾動保證數(shù)據(jù)行的對齊；這個(gè)功能在數(shù)據(jù)看板、儀表盤等多種場景下都很常見。

實(shí)現(xiàn)這種功能并非難事，主要思路為監(jiān)聽各個(gè)組件的滾動事件，當(dāng)某個(gè)組件主動滾動后將自身的滾動狀態(tài)同步給其他組件；但這種實(shí)現(xiàn)方式背后存在嚴(yán)重的隱患：當(dāng)某個(gè)組件接收到來自其他組件的主動滾動信息，并據(jù)此對自身的滾動狀態(tài)加以同步后，該組件會被動觸發(fā)滾動事件，并將自身的滾動信息傳遞給主動滾動組件；在這種情況下，極易造成死循環(huán)，并在頁面上的表現(xiàn)為組件不?！俺榇ぁ薄?/p>

思路

要解決這個(gè)問題，我們需要理清思路；我們假設(shè)當(dāng)前存在 A 和 B 兩個(gè)可滾動組件需要進(jìn)行信息同步，按照上述解決方案編寫代碼后，整個(gè)事件的觸發(fā)流程如下：

A 主動滾動 -> B 同步 A 的滾動信息 -> A 同步 B 的滾動信息 -> A 主動滾動 -> 無限循環(huán)

而理想狀態(tài)下整個(gè)事件的觸發(fā)流程如下：

A 主動滾動 -> B 同步 A 的滾動信息 -> A 主動滾動 -> B 同步 A 的滾動信息

兩者中的區(qū)別在于，理想狀態(tài)下被動滾動的組件不會反復(fù)觸發(fā)滾動事件造成主動組件的滾動。要解決這個(gè)問題，我們可以通過在滾動事件中對引起滾動的來源進(jìn)行區(qū)分，從而判斷是否要進(jìn)行滾動信息同步。

Coding

首先編寫組件對應(yīng)的滾動處理程序，當(dāng)某個(gè)組件主動滾動時(shí)，scrollPart 為空，則將 scrollPart 設(shè)置為當(dāng)前組件名稱；而主動滾動的組件再次觸發(fā)滾動時(shí)，將會同步滾動信息給其他組件，此時(shí)其他組件會被動觸發(fā)滾動事件；由于此前已將 scrollPart 設(shè)置為主動滾動事件的組件名稱，因此其他組件被動觸發(fā)滾動事件后會將 scrollPart 置空。

在這種情況下，即使主動滾動的組件被其他組件觸發(fā)被動滾動，也不會再次進(jìn)行同步。

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;
    }
}

這種處理組件同步的方法是可擴(kuò)展的，支持橫向、縱向滾動以及多個(gè)組件滾動，只需給對應(yīng)組件添加事件監(jiān)聽，并在 syncScrollState 函數(shù)里按照對應(yīng)的組件同步滾動信息即可。