表tbody垂直滾動條在滾動時閃爍

Question

我試圖使表格的標題行固定。 通過將overflow-y:scroll添加到表tbody中，我實現了這一點。 我還添加了一些JavaScript來調整表格的子級寬度。

在Mozilla Firefox中進行測試時，我注意到當左右移動水平滾動條時，垂直滾動條會閃爍。

這是它的codepen 。 請同時使用Firefox和Chrome（或其他瀏覽器，但絕對是Firefox）打開。

https://codepen.io/danae-vogiatzi/pen/BOPLow

Answer 1

不幸的是，由於Firefox異步處理滾動，因此會發生此問題。 https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

滾動效果通常是通過偵聽scroll事件，然后以某種方式（通常是CSS position或transform屬性）更新頁面上的元素來實現的。[...]

這些效果在瀏覽器的主線程上同步完成滾動的瀏覽器中效果很好。 但是，現在大多數瀏覽器都支持某種異步滾動，以便為用戶提供每秒60幀的一致體驗。 在異步滾動模型中，可視滾動位置在合成器線程中更新，並且在DOM中更新滾動事件並在主線程上觸發之前，用戶可見。 這意味着所實現的效果將稍稍落后於用戶所看到的滾動位置。 這可能會導致效果過時，過時或抖動-簡而言之，我們要避免這種情況。

這意味着子級寬度的計算與滾動事件無關。 如果要支持Firefox，則必須提出一種純CSS解決方案，或者獨立於scroll事件調整子級寬度。 或只是接受它作為一個小問題而繼續前進。