Angular 5 + PDF.JS - 滚动问题

Question

我正在使用带有 PDF.JS 的 Angular 5。我正在下载 pdf 并成功渲染它。 我必须在窗口中显示 pdf，所以我将 pdf 放在 div 中。

<div class="container border">
<div id="OptionsPanel" class="row lighten-1" *ngIf="isLoaded === true">                  
            <div id = "Options" class="btn-group-justified mx-auto"> 
                    <div class="btn-group" id="Paging">
                            <button mat-icon-button class="mr-3" (click)="previousPage()" [disabled]="pageNumber === 1">
                                    <mat-icon class="menu-hamburger-icon">chevron_left</mat-icon>
                            </button> 
                            <input class="form-control input"
                                type="number"
                                [(ngModel)]="pageNumber"
                                pattern="[0-9]"                                                              
                                min="1"
                            /> <span style="margin-top:7px;">{{ page }} / {{ totalPages }}</span>
                        <button mat-icon-button (click)="nextPage()"  [disabled]="pageNumber === totalPages">
                                <mat-icon class="menu-hamburger-icon">chevron_right</mat-icon>
                        </button> 
                    </div>  
                    <span class="divider"></span>
                    <div class="btn-group">
                            <button mat-icon-button class="mr-3" (click)="incrementZoom(-0.1)" [disabled]="zoom === 0.5">
                                    <mat-icon class="menu-hamburger-icon">zoom_out</mat-icon>
                            </button> 
                            <input class="form-control input"
                                type="number"
                                [(ngModel)]="zoom"
                                placeholder="Zoom"
                                pattern="-?[0-9]*(\.[0-9]+)?"                                                             
                                min="0"
                            />
                        <button mat-icon-button (click)="incrementZoom(0.1)">
                                <mat-icon class="menu-hamburger-icon">zoom_in</mat-icon>
                        </button> 
                    </div>
                    <span class="divider" style="margin-left : 15px;"></span>
            </div>  
</div>
<div class="row bg-dark center-block mx-auto" id="PDF">        
    <pdf-viewer
        [src]="pdfSrc" 
        [render-text]="true"                          
        [zoom] = "zoom"
        [(page)]="pageNumber"
        [show-all]="true"
        [stick-to-page]="true"
        [original-size]="false"
        (after-load-complete)="afterLoadComplete($event)"
        style="display:block;">
    </pdf-viewer>     
</div>                 

#PDF{
  overflow-y: scroll;
  max-height: 900px;
}

我遇到了与滚动相关的问题。您可以在下面看到详细图片 -> enter image description here

所以当我按下 nextPage 按钮（这是一个 Click 事件）时，整个网页都在向下滚动，而不是 pdf 的 div 滚动。

我试图移除身体的卷轴，但没有帮助。 我该如何解决这个问题。

Answer 1

我认为您的#PDF div 属于 div.container。 如果是这样，请尝试将 div.container 和 overflow-y 的高度设置为隐藏。

    div.container {
      height:100vh;
      overflow: hidden;
    }
    #PDF {
     height:100vh;
     overflow-y:scroll;
   }