在底部滚动

Scroll at bottom

本文关键字：滚动 底部      更新时间：2023-09-26

我正在用角度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;
}

现在我想默认将滚动保持在底部，每当消息到达时，它都应该向上滚动。

提前致谢

将其保留在底部：

您只需将 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/

对于更新元素的聊天，滚动顶部值：

假设不断更新的聊天对象采用 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
});
相关文章：