聊天型 - 滚动到底 - 角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像素是一个小顶部。

希望它适合你。