Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Debounces scroll events in web viewer.

Browse Source 
As requested in #5178, this change debounces the scroll events.
The reason for doing so is that browsers can event-storm especially on
scroll, communicating hundreds of subpixel changes.

The main reason for this resulting in poor performance is that on each
scroll event `scrollTop` was queried, which forces layouting.

This change will use `requestAnimationFrame` to make sure the browser can
allocate enough time to other tasks. The delay is however quite small, thus
the reduction in executions is less noticeable. Modern browsers however utilize
`requestAnimationFrame` to smoothen out rendering.
This commit is contained in:
Fabian Lange 2014-08-18 21:16:46 +02:00
parent 6ac995dc88
commit 403a4e2bda
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/viewer.js
View File

@ -274,20 +274,28 @@ var PDFView = {
watchScroll: function pdfViewWatchScroll(viewAreaElement, state, callback) { watchScroll: function pdfViewWatchScroll(viewAreaElement, state, callback) {
state.down = true; state.down = true;
state.lastY = viewAreaElement.scrollTop; state.lastY = viewAreaElement.scrollTop;
viewAreaElement.addEventListener('scroll', function webViewerScroll(evt) { state.rAF = null;
if (!PDFView.pdfDocument) { viewAreaElement.addEventListener('scroll', function debounceScroll(evt) {
if (state.rAF) {
return; return;
} }
var currentY = viewAreaElement.scrollTop; // schedule an invocation of webViewerScrolled for next animation frame.
var lastY = state.lastY; state.rAF = window.requestAnimationFrame(function webViewerScrolled() {
if (currentY > lastY) { state.rAF = null;
state.down = true; if (!PDFView.pdfDocument) {
} else if (currentY < lastY) { return;
state.down = false; }
} var currentY = viewAreaElement.scrollTop;
// else do nothing and use previous value var lastY = state.lastY;
state.lastY = currentY; if (currentY > lastY) {
callback(); state.down = true;
} else if (currentY < lastY) {
state.down = false;
}
// else do nothing and use previous value
state.lastY = currentY;
callback();
});
}, true); }, true);
}, },