Disable scroll on next page button click

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

I saw there was already a bug report created for this last year, but it appears that is not corrected in the latest version (6.3.0).

Every time I change a page, it automatically scrolls to the top of the document which is disrupting to the user because they have to scroll back up again to see the buttons.

Here is my code:

<div class="pdf-container">
    <div *ngIf="isLoaded" class="pdf-page-btns" style="text-align: center;">
        <button (click)="prevPage($event)" [disabled]="page === 1">Prev</button>
                    <span>{{ page }} / {{ totalPages }}</span>
        <button (click)="nextPage($event)" [disabled]="page === totalPages">Next</button>
    </div>

    <pdf-viewer [src]="pdfSrc" [show-all]="false" [page]="page" [render-text]="true" 
     [original-size]="false" [stick-to-page]="false" 
    (after-load-complete)="afterLoadComplete($event)" style="display: block;">
     </pdf-viewer>
</div>

Here is my styling:

.pdf {
    &-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding: 2em;
        @extend .section; // this just adds background color and box-shadow
    }
    &-page-btns {
        text-align: center;
        margin-bottom: 2em;
        & button {
            margin: 10px;
        }
    }
}

Thanks!

[CesarUCIGIT]

I have found a workaround that doesn’t involve directly changing the pdfjs module. So what you need to do is to capture on your component the PdfViewerComponent. Then you can access the pdfviewer and inside there is an object call scroll.down and you can set it to false. And that’s it you will no longer have scrolling when changing pages.

Angular Component

@ViewChild(PdfViewerComponent, { static: false })
   private pdfComponent: PdfViewerComponent;

initLoadCompleted(pdf: PDFDocumentProxy): void {
       this.pdfComponent.pdfViewer.scroll.down = false;
   }

HTML

<pdf-viewer
                  [src]="pdfData" (after-load-complete)="initLoadCompleted($event)"
                  [render-text]="true"
                  [page]="currentPage"
                  [show-all]="false">
      </pdf-viewer>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.