摘要：今天，你的瀏覽器滾動(dòng)了嗎序在頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見(jiàn)的構(gòu)成元素，而在其中的子元素有很大的概率超過(guò)父容器的尺寸限制，我們稱(chēng)之為溢出。

在 Web 頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見(jiàn)的構(gòu)成元素，而在其中的子元素有很大的概率超過(guò)父容器的尺寸限制，我們稱(chēng)之為“溢出”。而應(yīng)對(duì)“溢出”，隱藏或者滾動(dòng)是最常見(jiàn)的處理方式。滾動(dòng)，作為 FEers 最經(jīng)常處理的一種行為，卻因?yàn)椴煌瑸g覽器的各種表現(xiàn)形式讓大家頭痛不已，今天筆者從自身維護(hù)的組件出發(fā)，和大家分享一下自己在處理滾動(dòng)和滾動(dòng)條時(shí)遇到的問(wèn)題，以及解決的辦法，希望能夠給你在解決同類(lèi)問(wèn)題時(shí)帶來(lái)一些啟發(fā)。同時(shí)本文也是 “從零開(kāi)始的 React 組件開(kāi)發(fā)之路” 系列的第二篇 - 表格篇番外。

筆者在團(tuán)隊(duì)中負(fù)責(zé)基礎(chǔ)組件的開(kāi)發(fā)和維護(hù)，作為一個(gè) B 類(lèi)業(yè)務(wù)較多的團(tuán)隊(duì)，表格是最常用和需求最為旺盛的組件，假設(shè)有下方這樣一個(gè)最簡(jiǎn)單的表格結(jié)構(gòu)。

圖1：最簡(jiǎn)單的表格結(jié)構(gòu)

因?yàn)榭臻g有限，我們希望表格高度限定，這樣勢(shì)必引入表格上下滾動(dòng)的情況。同時(shí)，為了查看的方便，我們希望表格頭不會(huì)一起滾動(dòng)，即表格頭需要固定，只有表格體滾動(dòng)，因此我們需要把表格頭和表格體放入兩個(gè)容器中，而只讓表格體的容器滾動(dòng)。這是很普通的需求，也很容易實(shí)現(xiàn)，到目前為止一切都很順利。

圖2：表頭固定，表格體滾動(dòng)

然而這一切的美好，隨著表格列數(shù)的增多，變的有了一點(diǎn)烏云。因?yàn)轫?yè)面寬度受到電腦屏幕的限制，我們往往對(duì)表格的寬度也有限制，不可能無(wú)限延展開(kāi)。那么如果有很多的列呢？顯然，讓表格左右滾動(dòng)是一個(gè)很自然的想法。由于我們的表頭和表格體在兩個(gè)不同的容器中，讓這件事變的稍微麻煩一點(diǎn)。關(guān)于如何讓表頭和表格體同步左右滾動(dòng)，不是這篇文章討論的重點(diǎn)，所以不做詳細(xì)討論，簡(jiǎn)單來(lái)說(shuō)，我們通過(guò)監(jiān)聽(tīng)橫向滾動(dòng)的事件和不斷獲取當(dāng)前的 scrollLeft 來(lái)獲得同步。有一個(gè)麻煩的點(diǎn)是，我們不希望只能通過(guò)滾動(dòng)表格體來(lái)實(shí)現(xiàn)表格滾動(dòng)，也希望可以通過(guò)滾動(dòng)表頭來(lái)實(shí)現(xiàn)表格的左右滾動(dòng)，這就要求必須設(shè)置表頭的容器為 overflow-x: auto。

圖3：由于表格頭和表格體都需要橫向滾動(dòng)，會(huì)引入兩個(gè)滾動(dòng)條。

這顯然突破了大多數(shù)人對(duì)表格的認(rèn)知，橫向滾動(dòng)會(huì)有兩個(gè)滾動(dòng)條，一點(diǎn)都不美觀，需要我們?cè)谶@個(gè)基礎(chǔ)之上進(jìn)行優(yōu)化。表格體上的橫向滾動(dòng)條是沒(méi)有問(wèn)題的，主要問(wèn)題在于表格頭的，我們既希望能夠橫向滾動(dòng)，又不想看到那個(gè)該死的滾動(dòng)條，怎么辦呢？想辦法隱藏掉他就好了！首先我們?cè)O(shè)置表格頭的容器 overflow-x: scroll 以保證無(wú)論是否需要橫向滾動(dòng)都會(huì)出現(xiàn)滾動(dòng)條，方便我們簡(jiǎn)化狀態(tài)的判斷。接下來(lái)我們可以再設(shè)置表格頭的容器 margin-bottom: -scrollBarWidth 來(lái)隱藏讓他的父級(jí)幫忙吞掉這個(gè)滾動(dòng)條，一切就大功告成了。但令人頭大的是，滾動(dòng)條的尺寸在不同瀏覽器，甚至是不同系統(tǒng)（例如 Windows 和 Mac 下的 chrome）中都是不一樣的！ 我們無(wú)法很暴力地通過(guò)制定一個(gè)固定的值來(lái)做這件事，因此我們需要在表格渲染到頁(yè)面上去之后，主動(dòng)去探測(cè)滾動(dòng)條的寬度。

const scrollbarMeasure = {
  position: "absolute",
  top: "-9999px",
  width: "50px",
  height: "50px",
  overflow: "scroll",
};

let scrollbarWidth;

const measureScrollbar = () => {
  if (typeof document === "undefined" || typeof window === "undefined") {
    return 0; // 如果 document 不在，則證明不在瀏覽器環(huán)境，直接返回，兼容 node server render。
  }
  if (scrollbarWidth) {
    return scrollbarWidth; // 滾動(dòng)條在固定的環(huán)境下寬度不會(huì)改變，因此只做一次探測(cè)即可，優(yōu)化性能。
  }
  const scrollDiv = document.createElement("div");
  Object.keys(scrollbarMeasure).forEach((scrollProp) => {
    if (Object.prototype.hasOwnProperty.call(scrollbarMeasure, scrollProp)) {
      scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
    }
  }); // 創(chuàng)造一個(gè)遠(yuǎn)離人世的帶滾動(dòng)條的 div 用于探測(cè)，用戶對(duì)于此無(wú)感知。
  document.body.appendChild(scrollDiv);
  const width = scrollDiv.offsetWidth - scrollDiv.clientWidth; // 獲取滾動(dòng)條的寬度，offsetWidth 和 clientWidth 的區(qū)別，你能說(shuō)清楚嗎？
  document.body.removeChild(scrollDiv); // 探測(cè)完成，銷(xiāo)毀測(cè)試元素，減少對(duì)頁(yè)面的影響。
  scrollbarWidth = width; // 緩存結(jié)果，優(yōu)化性能
  return scrollbarWidth;
};

通過(guò)上面的方法，我們成功地隱藏了表格頭的橫向滾動(dòng)條。稍微滾動(dòng)一下，一切正常，一切都按照預(yù)想的執(zhí)行，直到一直滾動(dòng)到頭，問(wèn)題出現(xiàn)了，最后一列的表頭和下面的數(shù)據(jù)居然是對(duì)不齊的??！

圖4：當(dāng)表格體又可以左右滾動(dòng)時(shí)，問(wèn)題開(kāi)始復(fù)雜起來(lái)~

原來(lái)，因?yàn)槲覀冊(cè)试S表格體上下滾動(dòng)，使得在容器右側(cè)出現(xiàn)了一個(gè)縱向的滾動(dòng)條。而表頭因?yàn)槲覀兿Ｍ枪潭ǖ模虼朔旁诹肆硪粋€(gè)容器中，這導(dǎo)致他不能共享這個(gè)滾動(dòng)條。因此，這使得表格體拉到頭的時(shí)的 scrollLeft 也正好是表格頭到頭的位置，兩個(gè)到頭的位置上差了一個(gè)滾動(dòng)條的寬度！看到這里，也許有的小伙伴可能會(huì)開(kāi)始自己操練起來(lái)看看是不是這樣，然后發(fā)現(xiàn)并沒(méi)有類(lèi)似問(wèn)題，大呼坑爹，他們看到的情況大致如下圖：

圖4：Mac 某些設(shè)置下，看到的是另一份景象。

這引出了一個(gè) Mac 下一個(gè)比較好玩的小設(shè)置，在 Mac 下滾動(dòng)條何時(shí)顯示也可以配置，大致分為三類(lèi)，具體的配置可以在 系統(tǒng)偏好設(shè)置 -> 通用 中看到。

當(dāng)我們選擇 滾動(dòng)時(shí) 的時(shí)候，只有當(dāng)我們滾動(dòng)一個(gè)元素的時(shí)候才會(huì)顯示滾動(dòng)條，且這個(gè)滾動(dòng)條是飄在內(nèi)容上，不會(huì)占據(jù)體積，于是便能看到 圖3 中的情景。這個(gè)兼容性上升到了系統(tǒng)的程度，在 PC 上還是比較少見(jiàn)的（笑）。

所以這個(gè)問(wèn)題只會(huì)在這種情況下沒(méi)有出現(xiàn)，在 Mac 下選擇 始終顯示，也同樣會(huì)出現(xiàn)。

其實(shí)，從上面的分析中我們也可以也大致地找到了問(wèn)題的根源，表頭沒(méi)有共享表格體的縱向滾動(dòng)條，那么我們只要想辦法解決這個(gè)就好了。這個(gè)說(shuō)起來(lái)簡(jiǎn)單，但畢竟不是在同一個(gè)容器中，如何共享呢？方案一：插入一個(gè)和滾動(dòng)條相同寬度的 dom 元素充當(dāng)滾動(dòng)條，但這會(huì)引起另一個(gè)問(wèn)題就是表格頭和表格體的實(shí)際寬度不同，在各種滾動(dòng)計(jì)算上引發(fā)很多麻煩。方案二：滾動(dòng)條雖然在不同系統(tǒng)、不同瀏覽器里都不一樣尺寸，但卻有個(gè)優(yōu)點(diǎn)就是，只要在同一系統(tǒng)、統(tǒng)一瀏覽器里不管因?yàn)槭裁丛颍霈F(xiàn)在什么地方，他的尺寸總是保持一致的。利用這個(gè)特點(diǎn)，我們可以設(shè)置表頭容器的 overflow-y: scroll,總是包含一個(gè)縱向滾動(dòng)條的道，這樣就兵不血刃的解決了這個(gè)麻煩的問(wèn)題。

圖5：利用空的滾動(dòng)條連接下面的滾動(dòng)條來(lái)就可以解決上面的問(wèn)題。

這樣雖然比較好的解決了表格體有滾動(dòng)條的情況，但是如果表格體沒(méi)有滾動(dòng)的情況下，遇到的問(wèn)題就正好逆轉(zhuǎn)了，又會(huì)出現(xiàn)對(duì)不齊的情況！

圖6：當(dāng)表格體沒(méi)有縱向滾動(dòng)條的情況下，又會(huì)出現(xiàn)新的問(wèn)題。

解決這個(gè)問(wèn)題也有幾種思路，簡(jiǎn)單一點(diǎn)的思路可以模仿上面，給表格體也設(shè)置 overflow-y: scroll，這樣不管是否有滾動(dòng)，看起來(lái)都是一樣而且不會(huì)錯(cuò)位了。但是這種方法并不十分美觀，尤其在 windows 下顯得比較丑陋。于是在此方案基礎(chǔ)之上，我們加入了對(duì)于表格體縱向滾動(dòng)的檢測(cè)，當(dāng)滾動(dòng)區(qū)域的高度不大于容器高度時(shí)，即可認(rèn)為沒(méi)有滾動(dòng)，此時(shí)同時(shí)設(shè)置表頭和表格體 overflow-y: hidden ，就可以達(dá)到解決上述問(wèn)題，而在沒(méi)有滾動(dòng)的情況下也保持美觀的要求。

解決了上面兩個(gè)問(wèn)題之后，一個(gè)完整的支持表頭固定和橫向滾動(dòng)的表格就完成了。接下來(lái)又有了新的需求，要在原有表格基礎(chǔ)之上，支持左右側(cè)列固定。這也是表格中比較常見(jiàn)的需求，一些數(shù)據(jù)列或者操作列處于高頻使用下，希望能夠固定，這時(shí)就產(chǎn)生兩種處理表格體橫向滾動(dòng)條的方式。

圖7：支持左右列固定后的方案 A 和 B

方案 A 模仿表頭的設(shè)計(jì)方案，將固定的列放在另一個(gè)容器當(dāng)中，把需要滾動(dòng)的列多帶帶放置在一個(gè)可以滾動(dòng)的容器當(dāng)中。這種方案的問(wèn)題在于，固定列的寬度和列數(shù)都不像表頭一樣固定且較小。當(dāng)固定區(qū)域很大的時(shí)候，會(huì)嚴(yán)重?cái)D壓中間滾動(dòng)區(qū)域滾動(dòng)條的可操作區(qū)域，影響用戶體驗(yàn)。同時(shí)他也會(huì)遇到和表頭一樣，滾動(dòng)至最后一行對(duì)不齊的情況。方案 B 則比較好的解決了方案 A 的第一個(gè)問(wèn)題，左右側(cè)漂浮在表格的左右兩邊，覆蓋對(duì)應(yīng)的固定區(qū)域，橫向滾動(dòng)條可以覆蓋整個(gè)表格，不會(huì)受到固定列寬度的限制。

如何實(shí)現(xiàn)在固定區(qū)域也可以做到整個(gè)表格上下滾動(dòng)

漂浮的固定列會(huì)遮蓋住全局的橫向滾動(dòng)條。

對(duì)于問(wèn)題 1，他的解決思路其實(shí)和剛才表頭的解決思路類(lèi)似。主要是通過(guò)適當(dāng)?shù)卦O(shè)置 margin 來(lái)隱藏本應(yīng)存在的滾動(dòng)條，這里不再贅述。
對(duì)應(yīng)問(wèn)題 2，如果是沒(méi)有縱向滾動(dòng)，即 height: auto 這樣的情況下經(jīng)過(guò)測(cè)試不存在這個(gè)問(wèn)題，float 的元素會(huì)很自然地不占用滾動(dòng)條的體積，因此不會(huì)有遮擋。如果是有縱向滾動(dòng)的，情況則復(fù)雜了一些，當(dāng) float 的元素和下面的主表格等高時(shí)會(huì)出現(xiàn)遮擋的情況。

圖8：方案 B 引入的遮擋滾動(dòng)條的問(wèn)題

那既然同高會(huì)有遮擋的問(wèn)題，只要我們對(duì)應(yīng)的減掉對(duì)應(yīng)的滾動(dòng)條高度就可以了，解決第一個(gè)問(wèn)題時(shí)我們得到的大殺器，獲取滾動(dòng)條的高度，也可以用在這里。這個(gè)方案也能很好地應(yīng)該對(duì) Mac 下有的設(shè)置不顯示滾動(dòng)條的情況，在不顯示滾動(dòng)條的情況下，我們獲取到的寬度是 0，即沒(méi)有影響。而滾動(dòng)時(shí)，滾動(dòng)條會(huì)自動(dòng)浮在最高的位置，因此仍然整條可見(jiàn)。

那么，今天，你的瀏覽器 “滾動(dòng)” 了嗎？你是否已經(jīng)笑對(duì)其中了呢~

本文從實(shí)際的組件需求出發(fā)，通過(guò)三個(gè)有關(guān)滾動(dòng)條的問(wèn)題出現(xiàn)和解決為線索，和大家分享了如何跨系統(tǒng)、跨瀏覽器地兼容滾動(dòng)尤其是滾動(dòng)條的問(wèn)題，雖然是以表格為核心闡述，但解決方案不局限于表格之中，希望能給大家在遇到類(lèi)似問(wèn)題時(shí)提供一些靈感。文中涉及的行列固定相關(guān)的知識(shí)，因?yàn)榉潜疚闹攸c(diǎn)，故一筆帶過(guò)，如果有興趣了解實(shí)現(xiàn)詳情，可以參考我們團(tuán)隊(duì)開(kāi)源的 PC 端 UI 組件庫(kù) UXCore 和對(duì)應(yīng)的組件 Table 里的代碼~