Keeping the scroll to bottom

Question

Hello,

I have a shoutbox and I want to keep the scroll to bottom same as IM windows.

My html is

<div id="shoutContainer">
            <table id="shoutbox">
                <tbody>
                      <!-- shouts here -->
                </tbody>
            </table>
    </div>

My css

#shoutContainer {
    height: 100px; overflow-y: scroll;
}

If its not possible through html and css. Can we achieve this in raw javascript? because I am not using any framework

Answer 1

I'm not sure you can do this with CSS alone, but here's a great jQuery solution: Ajaxdaddy shoutbox.

Here is a free shout box service to keep your client happy:

Free shoutboxes.

I just made one to make sure it's ok, example here.

Answer 2

Whenever an item is added, do the following:

document.getElementBy('shoutContainer').scrollTop = 10000;
// or some other big number