Skip to content
This repository has been archived by the owner on Dec 22, 2018. It is now read-only.

Scroll doesn't render pages correctly #18

Open
ghedwards opened this issue Aug 29, 2016 · 10 comments
Open

Scroll doesn't render pages correctly #18

ghedwards opened this issue Aug 29, 2016 · 10 comments

Comments

@ghedwards
Copy link

Scroll doesn't render pages correctly, I tried a branch that seems to attempt to fix the problem by running a debounce function around the scroll listener, but it just seems to make it more clunky.

So I thought why try and re-invent the wheel ? I've started some work to integrate pdf-annotate-js with PDFJS.PDFViewer by listening for it's and do the Annotation rendering / work on top of the PDFViewer that ships with pdfjs-dist.

I'm curious, has anyone else had these issues and are there any further thoughts on doing it this way ?

@mvanlonden
Copy link

Any luck with this @ghedwards?

@ghedwards
Copy link
Author

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.

@mvanlonden
Copy link

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.

@stoberov
Copy link

stoberov commented Sep 30, 2016

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);
});

@roypardi
Copy link

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);
    });
  }
});

@geocine
Copy link

geocine commented Feb 21, 2017

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

@roypardi
Copy link

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
Copy link

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
Copy link

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

@ashishdotsquares
Copy link

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);
		});

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants