CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
vlio20
vlio20

Reputation: 9295

ng-repeat render and automatically scroll to bottom

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

Upvotes: 3

Views: 6220

Answers (1)

Peter Ashwell
Peter Ashwell

Reputation: 4302

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

Upvotes: 2

Related Questions