Firefox XUL textbox: How to scroll to the bottom?

Question

I'm working on a Firefox extension, and I have created a multiline text box. When the user presses a button, I add text to the textbox by using (Javascript) TextBoxElement.value += "More Text";

The problem with this code, is that whenever more text is added, the textbox scrolls all the way to the top. With much testing, I haven't figured out how to make it scroll all the way to the bottom again. For some reason the scrollTop property is always 0, and setting it doesn't effect the scroll bar.

Is there any ways I can set the scroll bar back to the bottom of the text box?

My extension's purpose is to embed a small chat box. I'm using a textbox to store the chat history. Maybe using a textbox isn't the most efficient way, so any other suggestions would be great as well.

Answer 1

Someone on Chatzilla helped me out on this one. Thank You!

Anyway, here is the solution:

var TextBoxElement = <TextBoxElement>;
var ti = document.getAnonymousNodes(TextBoxElement)[0].childNodes[0];
    ti.scrollTop=ti.scrollHeight;

Answer 2

The another solution is to move caret to the end of textbox content. Caret is controlled with selectionStart and selectionEnd properties (which can be set or get).

Here is the sample code:

var TextBoxElement = document.getElementById("myTextboxId");
var pos = TextBoxElement.value.length;
TextBoxElement.selectionStart = pos;
TextBoxElement.selectionEnd = pos;