ng-repeat render and automatically scroll to bottom

Question

I am trying to create some view that rendered with ng-repeat and each time element is added I want the view to be scrolled to bottom (like in a chat window - when new messages added the scroll view is still at the bottom).

My view consists of 3 parts

<div class="fixed-top">...</div> //header
<div class="content">...</div> //messages - overflow: auto; margin-bottom: 55px;
<div class="fixed-bottom">...</div> //footer - message input

Here is a screenshot from dev tools:
enter image description here

By default it is scrolled to top, I would like it to be scrolled to bottom after ng-repaet finishes rendering - if there will be added new elements to ng-repeat I would like to be scrolled to bottom again.

I have tried to use $anchorScroll like so:

$timeout(function() {
  $anchorScroll.hash("last_ng-repeat-id");
  $anchorScroll();
});

It fired to early and even when I try to do it with a click it still not moving.

Is there any css solution for this issue (preferred) if no any other will do.

Thanks

You'll need to set up a directive and emit an event when ng-repeat finishes rendering. Then listen for that event in your controller. http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished — JDavis, Dec 29 '14 at 22:30

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

You could set up a directive to run at the end of ng-repeat, which I don't like, or you could use scrollglue https://github.com/Luegg/angularjs-scroll-glue

edited May 23 '17 at 12:01

Community

1
1

answered Dec 29 '14 at 22:50

Peter Ashwell

4,292
2
18
22

ng-repeat render and automatically scroll to bottom

1 Answers1