2

スクロールを使用して、ビューへのスライドアップ効果を実現しようとしています。これは、毎日何回も使用しているコンソール (シェル、ブラウザー JavaScript、任意の REPL) とまったく同じですが、少しアニメーションの才能があります。フィドルでは、最初に望ましい効果の例と、望ましい効果の例がありますoverflow: scroll。

両方の部分を一緒に機能させることができませんでした。ここSOで同様の例を見たことがありますが、フィドルを使ったものも答えたものもありません!

イラスト: 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 に答える