在angularjs的聊天框中滚动到底部

Posted 2023-02-19

技术标签:

【中文标题】在angularjs的聊天框中滚动到底部【英文标题】：Scroll to bottom in chat box in angularjs 【发布时间】：2014-12-08 05:52:31 【问题描述】：

每当有新消息时，我都会尝试自动滚动到底部。

我的代码移动了滚动条，但它没有将它带到确切的底部。请帮忙。这是我的笨蛋。

http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9

这是我的 html：

<!DOCTYPE html>
<html>

<head>
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng-app="Sojharo">
  <div ng-controller="MyController">
    <div id="chatBox">
      <div ng-repeat="message in messages">
        <div class="chatMessage">
          <div class="messageTextInMessage">message.msg</div>
        </div>
      </div>
    </div>

    <div class="chatControls">

      <form ng-submit="sendIM(im)">
        <input type="text" ng-model="im.msg" placeholder="Send a message" class="chatTextField" />
      </form>
      Type and press Enter
    </div>
  </div>
</div>
</body>

</html>

这里是javascript：

angular.module('Sojharo', [])

.controller('MyController', function($scope) 

  $scope.messages = [];
  $scope.im = ;

  $scope.sendIM = function(msg) 


    $scope.messages.push(msg);
    $scope.im = ;

    var chatBox = document.getElementById('chatBox');
    chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240);


  
);

请让我知道这个角度的方式。以下方法，我在网上找到的，不起作用：

这是这些指令

.directive("myStream", function()
   return         
      restrict: 'A',
      scope:config:'=',
      link: function(scope, element, attributes)
       //Element is whatever element this "directive" is on
       getUserMedia( video:true, function (stream) 
           console.log(stream)
         element.src = URL.createObjectURL(stream);
         //scope.config = localvideo: element.src;
         //scope.$apply(); //sometimes this can be unsafe.
       , function(error) console.log(error) );
      
   

)

.directive('ngFocus', [function() 
      var FOCUS_CLASS = "ng-focused";
      return 
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) 
          ctrl.$focused = false;
          element.bind('focus', function(evt) 
            element.addClass(FOCUS_CLASS);
            scope.$apply(function() ctrl.$focused = true;);
          ).bind('blur', function(evt) 
            element.removeClass(FOCUS_CLASS);
            scope.$apply(function() ctrl.$focused = false;);
          );
        
      
    ]);

【问题讨论】：

【参考方案1】：

您可以为此创建一个指令：

.directive('scrollBottom', function () 
  return 
    scope: 
      scrollBottom: "="
    ,
    link: function (scope, element) 
      scope.$watchCollection('scrollBottom', function (newValue) 
        if (newValue)
        
          $(element).scrollTop($(element)[0].scrollHeight);
        
      );
    
  
)

http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview

顺便说一句：避免在控制器内部进行 DOM 操作（改用指令）。

【讨论】：

【参考方案2】：

感谢@MajoB

这是我的 2 美分，包括：

移除了 jQuery 依赖添加了$timeout 以确保$digest 循环完成

ngScrollBottom.js:

angular.module('myApp').directive('ngScrollBottom', ['$timeout', function ($timeout) 
  return 
    scope: 
      ngScrollBottom: "="
    ,
    link: function ($scope, $element) 
      $scope.$watchCollection('ngScrollBottom', function (newValue) 
        if (newValue) 
          $timeout(function()
            $element.scrollTop($element[0].scrollHeight);
          , 0);
        
      );
    
  
]);

【讨论】：

应该是$element.scrollTop = $element[0].scrollHeight;，因为scrollTop不是函数... 如果您直接处理 angular.element 而不是 DOM。尝试在 Angular 页面上运行 angular.element(document).find('body').scrollTop :)。太棒了。完美地为我的应用程序工作。你应该把它放在 npm 上角度 1.4.7: angular.element(document).find('body').scrollTop => 未定义如果它不适合你，请尝试：$element[0].scrollTop = $element[0].scrollHeight 注意两边的 [0]。

以上是关于在angularjs的聊天框中滚动到底部的主要内容，如果未能解决你的问题，请参考以下文章

是否可以让 ScrollView 滚动到底部？

react-native FlatList 滚动到底部的聊天应用程序

添加新项目时Android Firebase聊天RecyclerView自动滚动到底部

UITableView一出现就滚动到底部（类似微信，qq聊天界面）

uni-app 之聊天室页面滚动到底部

如何在反应中滚动到底部？