Displaying of table scrolling optimized

2026-09-28 15:30:51 +02:00
parent 7d314057e4
commit 0d2333694e
7 changed files with 56 additions and 17 deletions
@@ -134,20 +134,39 @@
      applyHidden();
    }

-    let syncing = false;
-    scroll?.addEventListener('scroll', () => {
-      if (syncing || !topScroll) return;
-      syncing = true;
-      topScroll.scrollLeft = scroll.scrollLeft;
-      syncing = false;
-    }, { passive: true });
+    // Keep the optional top scrollbar synchronized without forcing a second
+    // scroll-position write for every native scroll event. Fast horizontal
+    // scrolling can emit several events within one paint cycle; coalescing
+    // them into one animation frame reduces Chromium repaint/compositor work.
+    let scrollSyncFrame = 0;
+    let scrollSyncSource = null;

-    topScroll?.addEventListener('scroll', () => {
-      if (syncing || !scroll) return;
-      syncing = true;
-      scroll.scrollLeft = topScroll.scrollLeft;
-      syncing = false;
-    }, { passive: true });
+    function scheduleScrollSync(source) {
+      scrollSyncSource = source;
+      if (scrollSyncFrame) return;
+
+      scrollSyncFrame = requestAnimationFrame(() => {
+        scrollSyncFrame = 0;
+        const sourceElement = scrollSyncSource;
+        scrollSyncSource = null;
+
+        if (sourceElement === scroll && topScroll) {
+          if (topScroll.scrollLeft !== scroll.scrollLeft) {
+            topScroll.scrollLeft = scroll.scrollLeft;
+          }
+          return;
+        }
+
+        if (sourceElement === topScroll && scroll) {
+          if (scroll.scrollLeft !== topScroll.scrollLeft) {
+            scroll.scrollLeft = topScroll.scrollLeft;
+          }
+        }
+      });
+    }
+
+    scroll?.addEventListener('scroll', () => scheduleScrollSync(scroll), { passive: true });
+    topScroll?.addEventListener('scroll', () => scheduleScrollSync(topScroll), { passive: true });

    headers().forEach(th => {
      th.addEventListener('contextmenu', event => {