diff --git a/ts_web/elements/dees-pdf-viewer/component.ts b/ts_web/elements/dees-pdf-viewer/component.ts index 4f71d1a..31978b1 100644 --- a/ts_web/elements/dees-pdf-viewer/component.ts +++ b/ts_web/elements/dees-pdf-viewer/component.ts @@ -504,12 +504,39 @@ export class DeesPdfViewer extends DeesElement { if (centerY >= relativeTop && centerY <= relativeBottom) { if (this.currentPage !== i + 1) { this.currentPage = i + 1; + // Scroll the thumbnail into view if sidebar is visible + if (this.showSidebar) { + this.scrollThumbnailIntoView(i + 1); + } } break; } } } + private scrollThumbnailIntoView(pageNum: number) { + const thumbnail = this.shadowRoot?.querySelector(`.thumbnail[data-page="${pageNum}"]`) as HTMLElement; + const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement; + + if (thumbnail && sidebarContent) { + // Get the thumbnail's position relative to the sidebar + const thumbnailRect = thumbnail.getBoundingClientRect(); + const sidebarRect = sidebarContent.getBoundingClientRect(); + + // Check if thumbnail is outside the visible area + const isAbove = thumbnailRect.top < sidebarRect.top; + const isBelow = thumbnailRect.bottom > sidebarRect.bottom; + + if (isAbove || isBelow) { + // Scroll the thumbnail into view, centering it if possible + thumbnail.scrollIntoView({ + behavior: 'smooth', + block: 'center' + }); + } + } + } + private async scrollToPage(pageNum: number, smooth: boolean = true) { await this.updateComplete; const pageWrapper = this.shadowRoot?.querySelector(`.page-wrapper[data-page="${pageNum}"]`) as HTMLElement;