滾動底部

Question

我正在製作一個角度爲js的聊天應用程序，並且我已將滾動條添加到聊天區域。 下面是代碼：

<div class="chat active-chat" id="scrollme" > 
    <div class="scroll"> 
     <div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false" > 
     <div class="bubble" ng-class="c.type" > 
      {{c.message}} <br/> 
      <a style="color: blue;" ng-click="openFile(c.uploadedFile.fileContentType, c.uploadedFile.file)" ng-if="c.uploadedFile.file" target="_blank">{{c.uploadedFile.fileName}} 
      </a> &nbsp;&nbsp;&nbsp;&nbsp; 
      <span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span> 
     </div> 
     </div> 
    </div> 
</div> 

和CSS是這樣的：

.scroll{ 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

#scrollme{ 
    height:   403px; 
    width:   498px; 
    padding-right: 10px; 
    padding-bottom: 76px; 
    padding-left: 12px; 
} 

現在我想用默認值保留滾動在底部，當消息到達時，它應該向上滾動。

在此先感謝

Answer 1

在底部保持它：

您可以只設置scrollTop的該元素的高度：

更改以下元素：<div id="innerScroll" class="scroll">

var ele = document.getElementById('scrollme'); 
var innerEle = document.getElementById('innerScroll') //add this ID to your scroll class element. Or whatever name you want to 
var height = innerEle.offsetHeight; 
ele.scrollTop = height; 

看這個功能的小提琴：https://jsfiddle.net/qyj4h73g/1/

對於聊天更新的元素scrollTop的值：

假設是不斷更新的聊天對象是JSON表示，你可以看看吧JSON字符串值：

$scope.$watch('activeConversations', function(newValue, oldValue) { 
    var ele = document.getElementById('scrollme'); 
    var curScrollTop = ele.scrollTop; 
    ele.scrollTop = curScrollTop - 16; //Go up 16 pixels, but you can change this as you need 
});