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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// If we want modal dialogs to be centered in the viewport, we need to tweak
// its style and updated when the window size, scroll or
// zoom values change.
function updateModalClassStyle() {
  const currentStyleEl = instance.contentDocument.querySelector(
    "#modalPosition"
  );
  if (currentStyleEl) {
    currentStyleEl.parentNode.removeChild(currentStyleEl);
  }
  const styleEl = document.createElement("style");
  styleEl.setAttribute("id", "modalPosition");
  styleEl.appendChild(
    document.createTextNode(`.PSPDFKit-Modal-Backdrop {
        position: fixed !important;
        bottom: auto;
        right: auto;
        width: 100%;
        top: ${
          instance.contentDocument.querySelector(".PSPDFKit-Scroll").scrollTop
        }px;
        height: ${window.innerHeight}px;
      }`)
  );
  const head = instance.contentDocument.querySelector("head");
  if (head) {
    head.appendChild(styleEl);
  }
}

// Update and return the current container height, which can change with different
// zoom values or window sizes.
function updateContainerHeight() {
  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`;
  return containerHeight;
}

// Update the scroll listener to avoid querying the DOM inside it.
function updateScrollListener(containerHeight) {
  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)
        );
      }
      updateModalClassStyle();
    }
  };
}

function updateView() {
  updateScrollListener(updateContainerHeight());
  updateModalClassStyle();
}

window.onresize = updateView;

instance.addEventListener("viewState.zoom.change", updateView);

updateView();

This has been tested with PSPDFKit for Web 2020.6.1