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;
}

我有一个与滚动有关的问题。您可以在此处查看详细图片 - ＆gt; 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;
   }

Angular 5 + PDF.JS - 滚动问题

1 个答案: