如何在div中添加新內容時自動向下滾動到div的底部？

Question

<div class="container"> 
    <label ng-repaet"x in items">{{x}}</label> 
</div> 

我想在容器溢出時自動將容器div的滾動條放在底部，並將標籤項添加到底部。

的DIV容器的CSS類是：

.container{ 
    position:relative; 
    display:block; 
    overflow-y:scroll; 
    overflow-wrap:break-word; 
    height:300px; 
} 

，也是我有風格我的滾動條如下：

::-webkit-scrollbar{ 
    width:6px; 
} 
::-webkit-scrollbar-track{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 0px; 
} 
::-webkit-scrollbar-thumb{ 
    border-radius: 0px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

Answer 1

您可以在指令中的鏈接功能添加$scope.$watch像這樣：

function dynamicContainer() { 
    return { 
     restrict: 'AE', 
     template: '<div class="container container-dynamic"><div ng-repeat="item in data track by $index">{{item}}</div></div>', 
     scope: { 
      data: '=data' 
     }, 
     replace: true, 
     link: ($scope, $el, $attrs) => { 
      $scope.$watch(() => { 
       return $el[0].childNodes.length; 
      }, (newValue, oldValue) => { 
       $el.animate({ 
        scrollTop: $el[0].scrollHeight 
       }); 

       if (newValue !== oldValue) { 
        $el.animate({ 
         scrollTop: $el[0].scrollHeight 
        }); 
       } 
      }); 
     } 
    }; 
} 

這是你的pen。