Question

我正在尝试使用滚动来实现幻灯片进入视图效果。这就像我们每天都使用多个控制台（shell，浏览器javascript，任何REPL），但具有一点动画风格。在小提琴中，我首先得到了所需效果的示例，以及所需的overflow: scroll秒。

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

插图：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如果被隐藏的话会有点偏离。但是，最初没有隐藏它似乎对用户来说是不明显的。

溢出：滚动内容位置：绝对

1 个答案: