From b56790799abece4658d310ec9d53cb5a19ece257 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Sat, 19 Dec 2015 15:46:15 -0500
Subject: [PATCH] #1076: code review

---
 src/js/popup.js | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/js/popup.js b/src/js/popup.js
index 5824e2b..3be03e4 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -960,11 +960,6 @@ var makeMenu = function() {
         document.querySelector('.paneHead').clientHeight + 'px'
     );
 
-    // Make the header scroll with the window.
-    window.onscroll = function () {
-        document.querySelector('.paneHead').style.left = "-" + window.scrollX + "px";
-    };
-
     startMatrixUpdate();
     makeMatrixGroup0(groupStats[0]);
     makeMatrixGroup1(groupStats[1]);
@@ -1340,6 +1335,41 @@ var matrixSnapshotPoller = (function() {
 
 /******************************************************************************/
 
+// https://github.com/gorhill/uMatrix/pull/441
+// Make the header scroll horizontally with the document.
+
+// Ref.: resource-considerate scroll handler:
+// https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Example
+// Won't cause DOM changes from within scroll handler.
+
+var lastScrollX = 0;
+var onScrollThrottledFired = false;
+
+var onScrollThrottled = function() {
+    lastScrollX = window.scrollX;
+    var style = document.querySelector('.paneHead').style;
+    if ( lastScrollX === 0 ) {
+        style.removeProperty('left');
+    } else {
+        style.setProperty('left', '-' + lastScrollX + 'px');
+    }
+    onScrollThrottledFired = false;
+};
+
+var onScroll = function() {
+    if ( onScrollThrottledFired || window.scrollX === lastScrollX ) {
+        return;
+    }
+    onScrollThrottledFired = true;
+    self.requestAnimationFrame(onScrollThrottled);
+};
+
+if ( typeof self.requestAnimationFrame === 'function' ) {
+    document.addEventListener('scroll', onScroll);
+}
+
+/******************************************************************************/
+
 // Below is UI stuff which is not key to make the menu, so this can
 // be done without having to wait for a tab to be bound to the menu.