Javascript 角度5+；PDF.JS-滚动问题

我在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的div滚动。

我曾试图删除身体的卷轴，但没有帮助。 如何解决此问题。

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

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

---

“下一页（）”单击事件的作用是什么？你能发布你的.ts代码吗？nextPage（）{this.pageNumber++；}只需点击一次，增加一个页码。Sanju M。谢谢你的回复。我试过了，但对我没有帮助。有可能分享像plunker这样的东西吗？

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