聊天类型 - 滚动到底部 - 角度 2

Question

在聊天中添加消息后，需要自动滚动到底部。

尝试了实现此功能的 AfterViewChecked 方法，如 [angular2 scroll to bottom (chat style) - 它工作正常，因为它使滚动移动到底部。但是当我们在聊天中添加消息后尝试向上滚动时，它不允许并且再次将视图推到聊天的底部

请就此提出解决方法。

Answer 1

以下代码适用于我的 Angular 4 聊天应用程序

我的component.html

<div class="feedBody"  #scrollMe (scroll)="onScroll()" >
  <div class="feedList">
  </div>
</div>

我的component.css

.feedBody {
  height: 235px;
  overflow-y: auto;
}

我的component.ts

scrollToBottom():void{
    if (this.disableScrollDown) {
      return
    }
    try {
      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    } catch(err) { } 
  }
onScroll(){
    let element = this.myScrollContainer.nativeElement;
    let atBottom = (element.scrollTop+200) >= (element.scrollHeight - element.offsetHeight);
    if (atBottom) {
        this.disableScrollDown = false
    } else {
        this.disableScrollDown = true
    }
  }

我使用element.scrollTop+200 是因为我想要一种行为，我不应该强制出现在屏幕底部，但可以稍微高出 200 像素。

希望它对你有用。