How to disable scroll on page change?

[dmantelli]

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

Every time I change a page, it automatically scroll to the begining document. Is there any way to disable it?

Here is my code:

<pdf-viewer [src]="pdfObj.url" [show-all]="false" [stick-to-page]="flase" [(page)]="currentPDFPage" [original-size]="false" style="display: block;" [rotation]="rotation" [zoom]="zoom" (error)="onError($event)" (after-load-complete)="afterLoadComplete($event)"> </pdf-viewer>

[aseolin]

I want to know how to solve that issue too.

[amberwjq]

You can don't set the [page] by removing [(page)]="currentPDFPage"?

[Knu111]

Hi, same issue for me, any news about this problem ?

[bradgraybill]

Also an issue for me. If I am navigating from page to page, my Next and Previous button move out of the visible screen when it snaps to the viewer.

[falinsin]

Please anybody have a solution for this issue.
Is very unconfortable and if you ut some logos in the head of the page hide them.
This scroll must be an optional feature in properties and no forced always

[VadimDez]

Fixed in 6.0.0 See https://github.com/VadimDez/ng2-pdf-viewer/blob/master/CHANGELOG.md#600

[andreasalvi]

Hey there! I still have this problem. How I suppose to disable the scroll on top when page changes? Using [stick-to-page]="false"? I can't make it work..
As workaround, for now I've commented this portion of code

_get(_getPrototypeOf(PDFSinglePageViewer.prototype), "_scrollIntoView", this).call(this, {
        pageDiv: pageDiv,
        pageSpot: pageSpot,
        pageNumber: pageNumber
      });

in node_modules/pdfjs-dist/web/pdf_viewer.js (Ln 6336)

[cascesme]

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>

[edcoumont]

Hello,

I still have the issue in v7.
Here is a stackblitz demonstrating it : https://stackblitz.com/edit/ng2-pdf-viewer-7xercu?file=src/app/app.component.html

The problem comes from pdfjs viewer. When the page changes, it makes the parent container scroll to show the viewer on top of it.

I came up with a (ugly but working) workaround : adding a fake scrollable wrapper around the pdf container. When pdfjs will search for a scrollable container, it will find this one instead of the main one.

<div class="fake-wrapper" style="position:absolute; width:350px; height:399px; overflow:hidden;">
    <div class="pdf-container" style="position:absolute; width:300px; height:400px;">
        <pdf-viewer [...]></pdf-viewer>
    </div>
</div>

demo : https://stackblitz.com/edit/ng2-pdf-viewer-zwjsbj?file=src/app/app.component.html

[egonknapen]

Simplified: decreasing the height by 1px didn't fix it, but increasing it by 1px did. I used the following everywhere, it prevents scrolling up:

<div class="view" style="width:calc(100% + 1px); height: 100%">
    <pdf-viewer ...></pdfvieweR>
</div>

I have have [show-all] true/false, enabling/disabling scrollbars by styling etc. It still works. Of course you can add that styling to your css file.

The reason @edcoumont version worked, is because he increased the fake-wrapper's width by 50px.
I tried @cesarucigit's idea: "this.pdfComponent.pdfViewer.scroll.down = false;" in afterloadcomplete, but it didn't fix anything, in my cases.