Render a Document at Full Height

// If we want modal dialogs to be centered in the viewport, we need to tweak
// the style and update 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();