2

我正在尝试通过滚动实现slideUp进入视图效果。这就像我们每天都使用的任何控制台（shell、浏览器 javascript、任何 REPL）一样，但带有一点动画风格。在小提琴中，我首先有一个所需效果的示例，然后是所需的overflow: scroll第二个示例。

我一直无法让这两个部分一起工作。我在这里看到过类似的例子，但没有一个小提琴，也没有回答！

插图：http: //jsfiddle.net/n8tqw/

4

1 回答 1

3

这是一个非常有趣的谜题，但我终于让它工作了。本质上，您需要一个相对容器，它延伸到整个绝对容器的高度，然后拥有另一个具有设置高度（200px）的容器（相对或静态）。无论出于何种原因，浏览器都不认为“脱离顶部”的绝对内容位于滚动区域之外：

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();
});

新段落不能立即隐藏，因为相关容器需要获取总高度，如果隐藏，则不会添加新段落的高度。同样，scrollable-container的 scrollTop 如果隐藏起来会有点偏离。不过，最初不隐藏它似乎对用户来说是不明显的。

于 2012-12-17T23:18:14.387 回答