Angular 5 + PDF.JS - проблема с прокруткой - PullRequest
Новая
       8

Angular 5 + PDF.JS - проблема с прокруткой

0 голосов
/ 27 мая 2018

Я использую Angular 5 с PDF.JS.Я загружаю 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;
}

У меня есть проблема, связанная спрокрутки.Вы можете увидеть подробное изображение ниже здесь -> введите описание изображения здесь

Так что, когда я нажимаю на кнопку nextPage (которая была событием Click),вся веб-страница прокручивается вниз вместо прокрутки в формате PDF.

Я пытался удалить прокрутку тела, но это не помогло.Как я могу решить эту проблему.

1 Ответ

0 голосов
/ 27 мая 2018

Я думаю, что ваш #PDF div принадлежит div.container.если это так, попробуйте установить высоту div.container и overflow-y как скрытые. 

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