Reputation: 672
I'm developing a chat in javascript (angularjs without jQuery), and I would like to know if it's possible to load a scrollable div to the bottom.
I'm aware about the scrollTo js property, but in my case it's not satisfying.
First of all it's not a really good user experience to see the div scrolled to the bottom and furthermore I use onscroll (to top) pagination. So if my div is loaded to his top when triggered a scroll a new page will be loaded.
In outline I would something close to facebook chat windows.
If anybody know how to do that in an elegant way, thanks in advance.
EDIT :
Another constraints is that the chat message are loaded asynchronously, so if I only wait for the DOM to be loaded I scroll to the bottom of my empty div
Upvotes: 1
Views: 3188
Reputation: 293
Based Arjun's answer, but using scrollHeight
$("element").animate({scrollTop : $("element")[0].scrollHeight},1);
will scroll to the [non currently visible] bottom of the element (div/ul/...)
Upvotes: 0
Reputation: 1439
you can use this for scrolling a div to bottom
$("element").animate({scrollTop : $("element").height()},1);
Upvotes: 0
Reputation: 114
I'm not sure if this is what you're looking for, but if your chat window is a div with overflow: scroll set (like the FB Chat), wouldn't it work if you set the scrollTop property?
This should set the new scrolling position immediately, so you shold not see any transition.
I created a little CodePen to demonstrate it: http://codepen.io/anon/pen/dpkxl
Upvotes: 3
Reputation: 71240
Why not do:
var yourEl= document.getElementById("yourEl");
yourEl.scrollTop = yourEl.scrollHeight;
And call it every time new content is added to the div (yourEl
) in question?
Upvotes: 0