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.