Question

我有一个固定在浏览器窗口右侧的div。在该div中是一个容器，它包含使用ng-repeat传播的div元素。这些div元素中包含的数据是来自对HTML请求的响应的消息。出于某种原因，一旦div元素传播，我就无法使这个容器滚动到容器的底部。我已尝试使用$ anchorScroll使用$ location，我尝试使用普通的javascript getElementByID手动执行此操作。我理解请求是异步发生的，我尝试过使用promises和timeouts，但由于某种原因，我无法让这个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;

}）;

这是Javascript将div修复到浏览器窗口的右侧，以防万一有重要内容的干扰：

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

Answer 1

不要自己推出 - 尝试使用此组件：

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

免费奖金是“粘性” - 如果你不触摸滚动它会一直滚动到最后一个，但如果你滚动到自定义项目它将保留在那里，而不是滚动到底部如果新项目被添加。

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

1 个答案: