CODEWITHSUNDEEP
angularjsscrollscrolltopangularjs-ng-repeat
August Brenner
August Brenner

Reputation: 278

Not able to scroll to the bottom of my div element with Angular.js

I have a div which is fixed to the right side of the browser window. Within that div is a container that holds div elements that propagate with ng-repeat. The data contained in these div elements are messages from the response to an HTML request. For some reason I am not able to make this container scroll to the bottom of the container once the div elements have propagated. I have tried using $location with $anchorScroll, and I have tried doing it manually with plain javascript getElementByID. I understand the request happens asynchronously, and I have tried using promises and timeouts, but for some reason I am not able to get this div to scroll automatically.

Below is all the pertinent code, If someone would be able to point me in the right direction, I would be much appreciative!

Here is my Jade:

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'")

Here is my css:

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

Here is my controller:

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

here is my factory:

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;

});

And here is the Javascript that fixes the div to the right side of the browser window, just in case there is interference with something important:

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

Upvotes: 0

Views: 1614

Answers (1)

nikib3ro
nikib3ro

Reputation: 20596

Rather than rolling out with your own - try using this component:

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

The free bonus is "stickiness" - if you don't touch the scroll it'll always scroll to the last one, but if you do scroll to custom item it'll remain there, rather than scrolling to the bottom if new item gets added.

Upvotes: 2

Related Questions