Question

I am trying to achieve a slideUp into view effect, with scrolling. This is exactly like any console (shell, browser javascript, any REPL) that we all use multiple of everyday, but with a little animation flair. In the fiddle I have an example of the desired effect first, and the desired overflow: scroll second.

I have been unable to get both pieces working together. I have seen similar examples here on SO, but none with a fiddle, nor answered!

Illustration: http://jsfiddle.net/n8tqw/

Answer 1

This was quite an interesting puzzle, but I finally got it to work. Essentially you need a relative container that extends to the height of the entire absolute container, and then have another container (relative or static) with the set height (200px). For whatever reason, browsers don’t consider “off the top” absolute content to be outside of the scroll area:

http://jsfiddle.net/n8tqw/1/

$('#add-one').click(function() {

   var $p = $('<p class="content">' + number++ + '</p>')
        .appendTo('#from-bottom');
    $("#beholder").height($("#from-bottom").height());
    $("#scrollable-container").scrollTop($("#beholder").height());
    $p.hide().slideDown();
});

The new paragraph cannot be hidden immediately because the relative container needs to get the total height, and if it’s hidden the new paragraph’s height won’t be added. Similarly, scrollable-container‘s scrollTop will be a bit off if it’s hidden. Not hiding it initially seems to be unnoticeable to a user, though.