Scroll doesn't render pages correctly about pdf-annotate.js

[mvanlonden]

Just figured it out! UI.renderPage is getting called multiple times on some pages and causes that strange effect. By tracking the page numbers that have been rendered in an array and checking if a page has been rendered before calling UI.renderPage will remove the issue.

[roypardi]

I encountered this too and am testing the "array" suggestion above. Seems to work.

// Render stuff
let NUM_PAGES = 0;
let renderedPages = [];
let okToRender = false;
document.getElementById('content-wrapper').addEventListener('scroll', function (e) {
  let visiblePageNum = Math.round(e.target.scrollTop / PAGE_HEIGHT) + 1;
  let visiblePage = document.querySelector(`.page[data-page-number="${visiblePageNum}"][data-loaded="false"]`);

  console.log('pages', visiblePageNum, renderedPages.indexOf(visiblePageNum));

  if (renderedPages.indexOf(visiblePageNum) == -1){
    okToRender = true;
    renderedPages.push(visiblePageNum);
  } else {
    okToRender = false;
  }

  if (visiblePage && okToRender) {
    setTimeout(function () {
      UI.renderPage(visiblePageNum, RENDER_OPTIONS);
    });
  }
});

[mvanlonden]

Any luck with this @ghedwards?

[ghedwards]

Sort of.. I ended up building our own solution entirely using PDFJS, unfortunately I probably can't share it on here. Happy to have a chat about it privately if it's something you're looking for, send me an email or a Hangouts chat request.

[stoberov]

Hi @mvanlonden , thanks for the hint! I couldn't solve it with an array - instead, I made sure scrolling doesn't trigger more than one event by adding a timeout:

var timeout;

   document.getElementById('content-wrapper').addEventListener('scroll', function (e) {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        var visiblePageNum = Math.round(e.target.scrollTop / PAGE_HEIGHT) + 1;
        var visiblePage = document.querySelector('.page[data-page-number="' + visiblePageNum + '"][data-loaded="false"]');

        if (visiblePage) {
            setTimeout(function () {
                UI.renderPage(visiblePageNum, RENDER_OPTIONS);
            });
        }
    }, 50);
});

[geocine]

Thanks guys! @roypardi do you want to do a pull request. I tried your code and works.

[roypardi]

I don't have a fork of this – I was just messing with a one-off download, so you will have to add it directly.

[patryksosinski]

You also need to remember to clear the renderedPages array when you change scale or rotate as the pages won't be re-rendered.

[AP-Nothize]

Fixed in #57. But @patryksosinski 's point which is a good point is not catered yet!

[ashishdotsquares]

Hi guys,

I have resolvedd this issues from my end. Please have a look below mentioned changes into my code (index.js) on Line number 140.

		var NUM_PAGES = 0;
		var timeout;
		document.getElementById('content-wrapper').addEventListener('scroll', function(e) {
				clearTimeout(timeout);
				timeout = setTimeout(function() {
					var visiblePageNum = Math.round(e.target.scrollTop / PAGE_HEIGHT) + 1;
					var visiblePage = document.querySelector('.page[data-page-number="' + visiblePageNum + '"][data-loaded="false"]');
					if (visiblePage) {
							setTimeout(function() {
									UI.renderPage(visiblePageNum, RENDER_OPTIONS);
							});
					}
				}, 50);
		});