Pechou Pechou - 1 month ago 17
AngularJS Question

$timeout scrollTop directive is not working in angularJS

I am trying to do a small chat in angularJS. I use a div to display my messages and I want my div to be scrolled down when the page loads. I created a directive to do that.

MY HTML :

<div id="myChat" style="height: 500px; overflow-y: scroll;border: 1px solid #ccc;border-radius: 4px;" scroll-bottom>
<div ng-repeat='message in chatMessagesArray'><span style="color:green">aaa</span><span> bbb</span></div>
</div>


My angular directive :

.directive('scrollBottom', ['$timeout' , function ($timeout) {
return {
link: function (scope, element) {
$timeout(function () {
console.log($(element).scrollTop())
$(element).scrollTop($(element)[0].scrollHeight)
})
}
}
}


On the console, I see the output of console.log() which is 0 so I know the directive is triggered but the second line is not done ... Do you know what could be wrong ? Testing on MAC OS X + Chrome / FF

Answer

Try this. here i have added timeout of 1 second. scroll immediately after page load just remove millisecond part

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.chatMessagesArray = ["a", "b", "c", "d", "e", "f"];
});
app.directive('scrollBottom', ['$timeout',
  function($timeout) {
    return {
      link: function(scope, element) {
        $timeout(function() {
          $(element).scrollTop($(element)[0].scrollHeight)
        })
      }
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div id="myChat" style="height: 500px; overflow-y: scroll;border: 1px solid #ccc;border-radius: 4px;" scroll-bottom>
    <div ng-repeat='message in chatMessagesArray'> <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
    </div>
  </div>
</div>