无法使用 Angular.js 滚动到我的 div 元素的底部答案

【问题标题】：Not able to scroll to the bottom of my div element with Angular.js无法使用 Angular.js 滚动到我的 div 元素的底部
【发布时间】：2013-08-13 09:32:56
【问题描述】：

我有一个固定在浏览器窗口右侧的 div。在该 div 中是一个容器，其中包含通过 ng-repeat 传播的 div 元素。这些 div 元素中包含的数据是来自对 HTML 请求的响应的消息。出于某种原因，一旦 div 元素传播，我无法让这个容器滚动到容器的底部。我曾尝试将 $location 与 $anchorScroll 一起使用，并尝试使用普通的 javascript getElementByID 手动执行此操作。我知道请求是异步发生的，我尝试过使用承诺和超时，但由于某种原因，我无法让这个 div 自动滚动。

以下是所有相关代码，如果有人能够指出我正确的方向，我将不胜感激！

这是我的玉：

ul.dropdown-menu
  li(ng-repeat="group in groups")
   a(ng-click="loadGroup(group.id)") {{group.name}}


div(class='messages-container')
  .message-box(ng-repeat="message in messageIndex.messages| orderBy:'created_at'")

这是我的 CSS：

.messages-container {
   margin-bottom: 100px;
   width: 700px;
   height: 600px;
   overflow-y: scroll;
   display: block;

这是我的控制器：

app.controller('GroupMeCtrl',
  ['$scope', '$http', '$templateCache', '$location', 'Auth', 'MyMessageLoad',
  function($scope, $http, $templateCache, Auth, MyMessageLoad) {

    $scope.loadGroup = function($groupID){
      $scope.messageIndex = new MyMessageLoad();
      $scope.messageIndex.nextPage($groupID);
    };
}]);

这是我的工厂：

app.factory('MyMessageLoad', function($http, $templateCache) {

  var MessageLoad = function() {
    this.messages = [];
    this.beforeID = '';
  };

  MessageLoad.prototype.nextPage = function($groupID) {

    var urlString = 'https://api.groupme.com/v3/groups/' + $groupID + '/messages?'+ this.beforeID;
    $http({method: 'GET', url: urlString}).success(function(data) {
        var messages = data.response.messages;
        for (var i = 0; i < messages.length; i++) {
            this.messages.push(messages[i]);
        }
        this.beforeID = "&before_id=" + this.messages[this.messages.length - 1].id;
    }.bind(this));
  };

return MessageLoad;

});

这是将 div 固定在浏览器窗口右侧的 Javascript，以防万一重要的东西受到干扰：

sidebarwidth = $(".sidebar-width").css('width');
bodypaddingtop = $(".navbar-fixed-top").css('height');
sidebarheight = $("body").css('height');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
$('.sidebar-nav-fixed').css('height', sidebarheight);
$('body').css('paddingTop', bodypaddingtop);
contentmargin = parseInt(sidebarwidth);
$('.span-fixed-sidebar').css('marginLeft', contentmargin);
$('.span-fixed-sidebar').css('paddingLeft', 60);

【问题讨论】：

标签： angularjs scroll scrolltop angularjs-ng-repeat

【解决方案1】：

与其自行推出 - 尝试使用此组件：

https://github.com/Luegg/angularjs-scroll-glue

免费的好处是“粘性” - 如果您不触摸滚动条，它将始终滚动到最后一个，但如果您滚动到自定义项目，它会保留在那里，而不是滚动到底部新项目被添加。

【讨论】：