Question

Basically I have a scrollable area, a container div, with loads of items of fixed height (say 50px).

When adding new content, the height of the div is gradually increased (i.e. the new content animates in such that its height increases from zero. All these are CSS transitions.

Now is there a way to ‘anchor’ the scrollable div to the bottom so that the content area in the scrollable div expands upwards and not downwards.

I would prefer a solution that does not not use setInterval().

---

Reply to the comment below.

The source is at Download-To-Dropbox/src (They are in Coffee and Stylus).

Try going to http://dtd.heroku.com (That’s the live copy). You’ll see that directories expand on the right pushing the parent directory to the left (basically it’s like the column view in Finder – Mac).

The problem here is that once you drill into multiple dub-directories and the horizontal scrollbar appears, The new directory that opens is hidden to the right of the screen. I’d like it to be visible throughout the transition time.

Answer 1

Suppose your div‘s ID is scrolldiv. Here’s the basic function that adds content to the div:

var dv = document.getElementById("scrolldiv");
dv.innerHTML += "<div class = 'entry' style = 'height: 0px;'>New Entry</div>";
animateAdd(1000); //animation lasts for 1000 ms (1 s)

Here’s a prototype of the function animateAdd:

function animateAdd(duration) {
    var stepDur = duration / 50;
    var curHeight = 0;
    var dv = document.getElementById("scrolldiv");
    var lstDv = dv.getElementsByTagName("div");
    var newDv = lstDv[lstDv.length - 1];
    function doAnim() {
        if(curHeight >= 50) {
             //we're done!
             return;
        }
        curHeight ++;
        dv.scrollTop ++;
        newDv.style.height = curHeight + "px";
        setTimeout(doAnim, stepDur);
    }
    doAnim();
}

Demo: little link.

Hope that helped you in any manner!