diff --git a/web/app.js b/web/app.js index 7d2cb8637..15f1b685a 100644 --- a/web/app.js +++ b/web/app.js @@ -2363,7 +2363,6 @@ function webViewerResize() { // Work-around issue 15324 by ignoring "resize" events during printing. return; } - pdfViewer.updateContainerHeightCss(); if (!pdfDocument) { return; @@ -2646,9 +2645,9 @@ function webViewerWheel(evt) { // left corner is restored. When the mouse wheel is used, the position // under the cursor should be restored instead. const scaleCorrectionFactor = currentScale / previousScale - 1; - const rect = pdfViewer.container.getBoundingClientRect(); - const dx = evt.clientX - rect.left; - const dy = evt.clientY - rect.top; + const [top, left] = pdfViewer.containerTopLeft; + const dx = evt.clientX - left; + const dy = evt.clientY - top; pdfViewer.container.scrollLeft += dx * scaleCorrectionFactor; pdfViewer.container.scrollTop += dy * scaleCorrectionFactor; } diff --git a/web/pdf_viewer.js b/web/pdf_viewer.js index 1ee158c01..e5b8b9da0 100644 --- a/web/pdf_viewer.js +++ b/web/pdf_viewer.js @@ -227,10 +227,14 @@ class PDFViewer { #annotationMode = AnnotationMode.ENABLE_FORMS; + #containerTopLeft = null; + #enablePermissions = false; #previousContainerHeight = 0; + #resizeObserver = new ResizeObserver(this.#resizeObserverCallback.bind(this)); + #scrollModePageState = null; #onVisibilityChange = null; @@ -247,6 +251,8 @@ class PDFViewer { ); } this.container = options.container; + this.#resizeObserver.observe(this.container); + this.viewer = options.viewer || options.container.firstElementChild; if ( @@ -330,7 +336,8 @@ class PDFViewer { if (this.removePageBorders) { this.viewer.classList.add("removePageBorders"); } - this.updateContainerHeightCss(); + + this.#updateContainerHeightCss(); } get pagesCount() { @@ -1137,7 +1144,6 @@ class PDFViewer { if (this.defaultRenderingQueue) { this.update(); } - this.updateContainerHeightCss(); } /** @@ -2186,16 +2192,32 @@ class PDFViewer { this.currentScaleValue = newScale; } - updateContainerHeightCss() { - const height = this.container.clientHeight; - + #updateContainerHeightCss(height = this.container.clientHeight) { if (height !== this.#previousContainerHeight) { this.#previousContainerHeight = height; - docStyle.setProperty("--viewer-container-height", `${height}px`); } } + #resizeObserverCallback(entries) { + for (const entry of entries) { + if (entry.target === this.container) { + this.#updateContainerHeightCss( + Math.floor(entry.borderBoxSize[0].blockSize) + ); + this.#containerTopLeft = null; + break; + } + } + } + + get containerTopLeft() { + return (this.#containerTopLeft ||= [ + this.container.offsetTop, + this.container.offsetLeft, + ]); + } + /** * @type {number} */