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

滚动到底部

1 个答案: