Прокрутите внизу

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 
});