新しいコンテンツが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があります。