CODEWITHSUNDEEP
javascripthtmlcssangularjs
Tako
Tako

Reputation: 672

Load scrollable div at bottom

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.

Layout of my screen

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

Answers (4)

Leo
Leo

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

Arjun
Arjun

Reputation: 1439

you can use this for scrolling a div to bottom

$("element").animate({scrollTop : $("element").height()},1);

Upvotes: 0

Philipp Nowinski
Philipp Nowinski

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

SW4
SW4

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

Related Questions