Question

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

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

请为此建议解决方法。

Answer 1

以下代码适用于我的角度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，因为我想要一个我不应该强制出现在屏幕底部的行为，但可能会有200px的顶部。

希望它适合你。

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

1 个答案: