设置scrollTop仅在元素具有固定高度时有效

Question

我正在使用AgularJS创建一个聊天框，我需要包含消息线程的可滚动div在默认情况下滚动到底部。 div具有以下这些属性

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

我正在使用此指令在列表中的最后一个元素加载时将scrollTop设置为scrollHeight

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

不幸的是，这不起作用。 scrollTop值保持为0.但是，当我给div一个固定的高度而不是百分比时，它会滚动到所需的位置。

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

如何在将div的高度设置为百分比时设置scrollTop。