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.