How do I control scrolling created by CSS?

[jordana309]

I have a <p> tag that I use to show the output of a program as it dumps it's output to the screen (ECHOs). My javascript has listeners for output, and dumps the output into this p tag. When it exceeds the screen size (defined by a <div> tag), then scrollbars appear. I need to have it always show the bottom of the window, like a terminal window would do. How can I do this automatically with javascript? Let me know what code you'd want to see for this (I'm using adobe AIR, so most of the program handling is done by AIR).

[acoder]

You could use scrollIntoView

[jordana309]

I tried that one. It didn't work, nor did any of the other JS scrolling options. The box doesn't have a scroll until it overflows (done with CSS - overflow:scroll;

And My code here looks like this:

    <div class="consoleBox">
        <p id="consoleOutput" class="consoleText"></p>
    </div>
    <br />
    <div style="margin-left:auto;margin-right:auto;width:95%;">
        <input type="text" id="consoleInput" style="width:75%" />
        <input type="button" onclick="sendToConsole();" style="width:20%;margin-left:3px;" value="Send to console" />
    </div>
 

And when I add to it, I do by the following:

var consoleScreen = document.getElementById("consoleOutput");
        var data = encodeProcess.standardOutput.readUTFBytes(encodeProcess.standardOutput.bytesAvailable);
        consoleScreen.innerText += data;
 

encodeProcess is a process thread handle object, that allows me to read and write to STDOUT and STDIN, respecively. Anyway, none of the scroll properties that I saw in Javascript proper let me scroll like I needed to, so now I'm trying jQuery. Does anybody have another idea? Basically, the output from this terminal will exceed 10 pages every time, and sometimes might be hundreds of pages.

[jordana309]

Ah. Got it. So, I had to change the last line to be the following:

var consoleScreen = document.getElementById("consoleOutput");
        var data = encodeProcess.standardOutput.readUTFBytes(encodeProcess.standardOutput.bytesAvailable);
        consoleScreen.innerText += data;
        $('#consoleBox').scrollTop(document.getElementById("consoleBox").scrollHeight);
 

Turns out that I wasn't even grabbing the div tag...stupid me. Sorry for a silly mistake. This now makes what looks like a terminal window, focused on the bottom of the window.