Calling this.pdf.pdfViewer.scrollPageIntoView({ pageNumber: 20 }); does not work

[jiangyh1024]

Bug Report or Feature Request (mark with an x)

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

problem as title.

[AntonioDell]

Hi,
Can you please post some code related to the issue?
Which Version do you use?
Does this happen in single page view or multi page view or both?

[jiangyh1024]

Version 5.2

@ViewChild('pdf') pdf: PdfViewerComponent;  
ngOnInit() {
    this.pdfSrc = '../assets/c.pdf';
  }

  click() {
    this.pdf.pdfViewer.scrollPageIntoView({
      pageNumber: 20
    });
  }

<button (click)="click()">click</button>
<pdf-viewer #pdf *ngIf="pdfSrc" class="pdf-viewer" [show-all]="true" [src]="pdfSrc" [render-text]="false"
  [original-size]="false" [autoresize]="true" (after-load-complete)="callBackFn($event)" (page-rendered)="pageRendered($event)">

</pdf-viewer>

.pdf-viewer {
  display: block;
}

I also tried to add [stick-to-page]="true"， but it did not work

[AntonioDell]

Try binding to the "page" property like this:
<pdf-viewer [(page)]="currentPage"></pdf-viewer>
And to switch pages, just change the "currentPage" property.

[jiangyh1024]

Try binding to the "page" property like this:
<pdf-viewer [(page)]="currentPage"></pdf-viewer>
And to switch pages, just change the "currentPage" property.

I also tried, but it did not work!

[jiangyh1024]

<button (click)="click()">click</button>
<pdf-viewer #pdf *ngIf="pdfSrc" [(page)]="pdfPageNumber" class="pdf-viewer" [show-all]="true" [src]="pdfSrc"
  [render-text]="false" [original-size]="false" [autoresize]="true" [stick-to-page]="true" (after-load-complete)="callBackFn($event)"
  (page-rendered)="pageRendered($event)">

</pdf-viewer>

  click() {
    // this.pdf.pdfViewer.scrollPageIntoView({
    //   pageNumber: 20
    // });
    this.pdfPageNumber = 20;
  }

when loading, console throw an error saying

ERROR TypeError: Cannot read property 'div' of undefined
    at PDFViewer._resetCurrentPageView (pdf_viewer.js:4881)
    at PDFViewer._setCurrentPageNumber (pdf_viewer.js:4595)
    at PDFViewer.set (pdf_viewer.js:5217)
    at ng2-pdf-viewer.es5.js:617
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)

[jiangyh1024]

removing [stick-to-page]="true" solve the error above, but in this way, it can not direct to the certain page according to document.

[jiangyh1024]

in issue #244 , I found a workaround that commenting out the did the trick, but console still had the error.
and If I set 'max-height' or 'height' to the pdf-viewer, it did not work again.
I am confused. If there are many pages, I think there should be a container which contains the pdf-viewer, and I can view pdf in the container and scroll in the container.

[AntonioDell]

Sounds a lot like the issue I fixed in my fork https://github.com/AntonioDell/ng2-pdf-viewer/tree/bugfix/horizontal-scroll?files=1
Could you try using my code to see if the issue you are referring to is fixed?
There is also a package available in npm which I use until my PR is merged.
Install it with npm i ng2-pdf-viewer_temp-release but please change to the original package when my PR is merged, since this is only a temporary solution

EDIT:
See my PR on this issue for a code example, how you can wrap the PDF viewer into a scrollable div for reference. It is pretty straight forward

[jiangyh1024]

OK, thank you

Sounds a lot like the issue I fixed in my fork https://github.com/AntonioDell/ng2-pdf-viewer/tree/bugfix/horizontal-scroll?files=1
Could you try using my code to see if the issue you are referring to is fixed?
There is also a package available in npm which I use until my PR is merged.
Install it with npm i ng2-pdf-viewer_temp-release but please change to the original package when my PR is merged, since this is only a temporary solution

EDIT:
See my PR on this issue for a code example, how you can wrap the PDF viewer into a scrollable div for reference. It is pretty straight forward

[VadimDez]

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