前言

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

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

思路

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

A 主動(dòng)滾動(dòng) -> B 同步 A 的滾動(dòng)信息 -> A 同步 B 的滾動(dòng)信息 -> A 主動(dòng)滾動(dòng) -> 無限循環(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è)問題，我們可以通過在滾動(dòng)事件中對(duì)引起滾動(dòng)的來源進(jìn)行區(qū)分，從而判斷是否要進(jìn)行滾動(dòng)信息同步。

Coding

首先編寫組件對(duì)應(yīng)的滾動(dòng)處理程序，當(dāng)某個(gè)組件主動(dòng)滾動(dòng)時(shí)，scrollPart 為空，則將 scrollPart 設(shè)置為當(dā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)事件的組件名稱，因此其他組件被動(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)的組件名稱

// 根據(jù)組件名稱生成組件滾動(dòng)事件的回調(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ò)展的，支持橫向、縱向滾動(dòng)以及多個(gè)組件滾動(dòng)，只需給對(duì)應(yīng)組件添加事件監(jiān)聽，并在 syncScrollState 函數(shù)里按照對(duì)應(yīng)的組件同步滾動(dòng)信息即可。