ng-repeat render and automatically scroll to bottom
vlio20
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:
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
Peter Ashwell
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Scroll Automatically to the Bottom of the Page
- 2
How to automatically scroll to the bottom in AngularJS?
- 3
Automatically scroll to bottom as the page loads
- 4
Angular infinite scroll + deckgrid ng-repeat render cards only on newly fetched data
- 5
AngularJS with ng-scroll and ng-repeat
- 6
AngularJS with ng-scroll and ng-repeat
- 7
How can I use Meteor callbacks with Jquery to automatically scroll to the bottom of a div every time its contents re-render?
- 8
Scroll automatically to the bottom page - speed control
- 9
How to scroll to automatically scroll to the bottom of an editable div onload
- 10
angularjs ng-repeat implement stick scroll
- 11
How to render {{ }} during ng-repeat?
- 12
Angular Render Image tag in NG repeat
- 13
How to render {{ }} during ng-repeat?
- 14
Combining ng-repeat and ng-controller to render item
- 15
Enthought Canopy (python) does not scroll to bottom of output automatically
- 16
How would I make a div automatically scroll to the bottom?
- 17
Automatically scroll the listview from top to bottom in c#
- 18
r - How do I automatically scroll to the bottom of a div in shinyapp?
- 19
Scroll to bottom automatically using vanilla Javascript/CSS - Polymer
- 20
Css put a full line at the bottom of every row with angular ng repeat
- 21
How to retain scroll position of ng-repeat in AngularJS?
- 22
Scroll to the last added record in the array within ng-repeat
- 23
How to scroll down to latest entry in ng-repeat (AngularJS or Javascript)
- 24
How to retain scroll position of ng-repeat in AngularJS?
- 25
Scroll to the last added record in the array within ng-repeat
- 26
Getting the index of ng-repeat after scroll in controller - angular , Ionic
- 27
Render array of arrays table in Angular using ng-repeat
- 28
Angular JS: ng-repeat does not render within table tag
- 29
Browser try to render images before ng-repeat processed
Comments