聊天型 - 滾動到底 - 角2

Question

需要自動滾動到底部一次消息在聊天被添加。

嘗試AfterViewChecked方法實現這一點，在 [angular2 scroll to bottom (chat style) suggessted - 它工作得很好，因爲它使滾動移至底部。但是，當我們爲我們在聊天中添加信息嘗試儘快向上滾動，它不允許它再一次推動以聊天

請提出這個解決方法的底部。

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，因爲我想一個行爲，其中我不應該強制出現在屏幕的底部，但可以通過200像素是一個小頂部。

希望它適合你。