如何在溢出y div中强制滚动

时间:2018-07-25 15:36:00

标签: javascript html angular typescript ngfor

我正在尝试在包含ngfor列表的div中强制进行偏移滚动

我在div上尝试将其作为溢出-y:

@ViewChild('list') listRef: ElementRef;

然后点击我尝试使用一些日志来确保它被称为

this.listRef.nativeElement.offsetTop = 500;

什么都没发生,我知道如何实现这一目标?

编辑:

HTML:

<div
  #gridContainerId
  class="gridContainer">
  <a *ngFor="let item of images;">
     <img src="{{getImage(item)}}"/>
  </a>
</div>

css:

.gridContainer {
  height: 90vh;
  overflow-y: scroll;
}

组件:

@ViewChild('gridContainerId') ref: ElementRef;

this.store.pipe(
      select(fromImages.getImages),
      takeWhile(() => this.componentActive)
    ).subscribe(imagesItems => {
        this.images = imagesItems;
        updateScroll();
      }
    );

updateScroll(){
  this.ref.nativeElement.scrollTop = this.ref.nativeElement.scrollHeight;
}

1 个答案:

答案 0 :(得分:0)

我最近也遇到过同样的情况,当单击某些按钮时,div滚动到底部,我使用以下代码实现了它:

this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;

scrollTop属性用于指定要从视图顶部滚动的像素数。
并且属性scrollHeight是用于获取div的总高度。