Issue #223 PR

src/app/pdf-viewer/pdf-viewer.component.scss

@@ -1,5 +1,7 @@
 .ng2-pdf-viewer-container {
   overflow-x: auto;
+  position: relative;
+  height: 100%;
 }
 
 :host ::ng-deep {

src/app/pdf-viewer/pdf-viewer.component.spec.ts

@@ -71,10 +71,11 @@ describe('AppComponent', () => {
   });
 
   describe('getScale', () => {
-    it('should get scale 1 with offsetWidth = 0', function() {
+    it('should get scale 1 with viewportWidth = 0 or viewerContainerWidth = 0', function() {
+      pdfViewerFixture.detectChanges();
       let spy = spyOnProperty(
-        (pdfViewer as any).element.nativeElement,
-        'offsetWidth',
+        (pdfViewer as any).pdfViewerContainer.nativeElement,
+        'clientWidth',
         'get'
       ).and.returnValue(0);
 

src/app/pdf-viewer/pdf-viewer.component.ts

@@ -89,8 +89,10 @@ export class PdfViewerComponent
   private _externalLinkTarget = 'blank';
   private _showBorders = false;
   private lastLoaded: string | Uint8Array | PDFSource;
+  private _latestScrolledPage: number;
 
   private resizeTimeout: NodeJS.Timer;
+  private pageScrollTimeout: NodeJS.Timer;
   private isInitialized = false;
 
   @Output('after-load-complete') afterLoadComplete = new EventEmitter<
@@ -322,6 +324,10 @@ export class PdfViewerComponent
         this.resetPdfDocument();
       }
       if ('page' in changes) {
+        if (changes['page'].currentValue === this._latestScrolledPage) {
+            return;
+        }
+
         // New form of page changing: The viewer will now jump to the specified page when it is changed.
         // This behavior is introducedby using the PDFSinglePageViewer
         this.getCurrentViewer().scrollPageIntoView({ pageNumber: this._page });
@@ -336,18 +342,18 @@ export class PdfViewerComponent
     this._pdf
       .getPage(currentViewer.currentPageNumber)
       .then((page: PDFPageProxy) => {
-        const viewport = (page as any).getViewport({
+        const viewportWidth = (page as any).getViewport({
           scale: this._zoom,
           rotation: this._rotation
-        });
+        }).width * PdfViewerComponent.CSS_UNITS;
         let scale = this._zoom;
         let stickToPage = true;
 
         // Scale the document when it shouldn't be in original size or doesn't fit into the viewport
         if (
           !this._originalSize ||
           (this._fitToPage &&
-            viewport.width > this.element.nativeElement.offsetWidth)
+            viewportWidth > this.pdfViewerContainer.nativeElement.clientWidth)
         ) {
           scale = this.getScale(
             (page as any).getViewport({ scale: 1, rotation: this._rotation })
@@ -372,9 +378,14 @@ export class PdfViewerComponent
     });
 
     eventBus.on('pagechanging', e => {
-      if (e.pageNumber != this._page) {
-        this.page = e.pageNumber;
+      if (this.pageScrollTimeout) {
+        clearTimeout(this.pageScrollTimeout);
       }
+
+      this.pageScrollTimeout = setTimeout(() => {
+        this._latestScrolledPage = e.pageNumber;
+        this.pageChange.emit(e.pageNumber);
+      }, 100);
     });
 
     eventBus.on('textlayerrendered', e => {
@@ -560,16 +571,15 @@ export class PdfViewerComponent
   }
 
   private getScale(viewportWidth: number) {
-    const offsetWidth =
-      this.element.nativeElement.offsetWidth -
+    const pdfContainerWidth = this.pdfViewerContainer.nativeElement.clientWidth  -
       (this._showBorders ? 2 * PdfViewerComponent.BORDER_WIDTH : 0);
 
-    if (offsetWidth === 0) {
+    if (pdfContainerWidth === 0 || viewportWidth === 0) {
       return 1;
     }
 
     return (
-      (this._zoom * (offsetWidth / viewportWidth)) /
+      (this._zoom * (pdfContainerWidth / viewportWidth)) /
       PdfViewerComponent.CSS_UNITS
     );
   }