Div在Angular 7+中的滚动位置

Question

我有一个内部滚动的div。 我不知道为什么我没有正确获得'scrollTop'位置。

 let box: any = document.querySelector('.scrollingBox');
 let currentPos = box.scrollTop;
 console.log(currentPos) // always is 0 despite scrolling in the div

<div class="scrollingBox">
    <ng-scrollbar #scrollRef class="scroller">
    <div class="container" style="position:relative">
        <div class="recentWrapper">
            <h4>New and Featured Releases</h4>
            <app-book [bookdata]="book" *ngFor="let book of featuredBooks"></app-book>
        </div>
        <div style="clear:both"></div>
        <div class="libraryWrapper">
            <h4>The Library</h4>
            <app-book [bookdata]="book" *ngFor="let book of books"></app-book>
            <div style="clear:both"></div>
            <a class="moreResults" [hidden]="!more" href="javascript:void(0)" (click)="getMore()">&#9656;More results</a>
        </div>
    </div>
    </ng-scrollbar>
</div>

Answer 1

改用ElementRef

  @ViewChild('scrollingBox', {static: false}) scrollingBox: ElementRef;
 console.log(this.scrollingBox.nativeElement.offsetTop) //

<div class="scrollingBox" #scrollingBox>
    <ng-scrollbar #scrollRef class="scroller">
    <div class="container" style="position:relative">
        <div class="recentWrapper">
            <h4>New and Featured Releases</h4>
            <app-book [bookdata]="book" *ngFor="let book of featuredBooks"></app-book>
        </div>
        <div style="clear:both"></div>
        <div class="libraryWrapper">
            <h4>The Library</h4>
            <app-book [bookdata]="book" *ngFor="let book of books"></app-book>
            <div style="clear:both"></div>
            <a class="moreResults" [hidden]="!more" href="javascript:void(0)" (click)="getMore()">&#9656;More results</a>
        </div>
    </div>
    </ng-scrollbar>
</div>