1

I am creating a chatbox using AgularJS, and I need my scrollable div containing the message thread to scroll to the bottom by default. The div has these properties below

<div id="test" style="margin-top: 50px; margin-bottom: 50px; overflow-y: scroll; height: 100%;">

I am using this directive to set the scrollTop to the scrollHeight when the last element in the list is loaded

angular.module('myApp.directives', [])
.directive('lastElement', function(){
  return {
    priority: 1,
    restrict: 'A',
    link: function(scope, $el, attrs, ctrls){
      var parent = $el[0].parentNode.parentNode;

      if(scope.$last){
        parent.scrollTop = parent.scrollHeight;
      }
    }
  }
});

Unfortunately, this does not work. The scrollTop value remains 0. However, when I instead give the div a fixed height instead of a percentage it scrolls to the desired spot.

<div id="test" style="margin-top: 50px; margin-bottom: 50px; overflow-y: scroll; height: 100px;">

How can I set scrollTop while setting the height of my div to a percentage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.