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
Philipp Nowinski :
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?\n\nThis should set the new scrolling position immediately, so you shold not see any transition.\n\nI created a little CodePen to demonstrate it: http://codepen.io/anon/pen/dpkxl",
2014-03-12T09:24:30
SW4 :
Why not do:\n\nvar yourEl= document.getElementById(\"yourEl\");\nyourEl.scrollTop = yourEl.scrollHeight;\n\n\nAnd call it every time new content is added to the div (yourEl) in question?",
2014-03-12T09:23:11
Arjun :
you can use this for scrolling a div to bottom\n\n$(\"element\").animate({scrollTop : $(\"element\").height()},1);\n",
2014-03-12T09:46:54