jquery - 溢出: scroll with content position: absolute

Question

我正在尝试通过滚动实现幻灯片进入 View 效果。这与我们每天使用的任何控制台(shell、浏览器 JavaScript、任何 REPL)完全相同，但具有一点动画天赋。在 fiddle 中，我首先有一个所需效果的示例，然后是所需的 overflow:scroll 。

我一直无法让这两部分一起工作。我在 SO 上看到过类似的例子，但没有一个用 fiddle ，也没有回答!

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

Answer 1

这是一个非常有趣的谜题，但我终于成功了。本质上，您需要一个延伸到整个绝对容器高度的相对容器，然后有另一个具有设置高度(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 也会有点偏离。不过，不隐藏它最初似乎不会被用户注意到。