Render document in full height

Q: How can I render the whole document in full height?

A: Even if you set the container height to the full height of the document, the viewport will not render simultaneously more than 10 pages (5 if you’re at page 0), for performance reasons. Therefore, if you want to be able to navigate the document while rendering at full height, you have to update the current page as you scroll down the container, so the rendered pages change to surround the current page.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let containerHeight = 0;
for (let i = 0; i < instance.totalPageCount; i++) {
  containerHeight +=
    instance.pageInfoForIndex(i).height + instance.viewState.spreadSpacing;
}
containerHeight *= instance.currentZoomLevel; // convert to client dimension
containerHeight += 44; // Toolbar height
containerHeight += instance.viewState.viewportPadding.vertical * 2; // viewport padding
document.querySelector("#container").style.height = `${containerHeight}px`;
const rect = document.querySelector("#container").getBoundingClientRect();
const containerTop = rect.top + 44;
const containerBottom = containerTop + containerHeight - 44;
window.onscroll = function() {
  if (window.scrollY > containerTop && window.scrollY < containerBottom) {
    const currentPageIndex = Math.floor(
      (instance.totalPageCount * (window.scrollY - containerTop)) /
        containerHeight
    );
    if (currentPageIndex !== instance.viewState.currentPageIndex) {
      instance.setViewState(viewState =>
        viewState.set("currentPageIndex", currentPageIndex)
      );
    }
  }
};

This has been tested with PSPDFKit for Web 2020.2