0

基本的に、固定高さ (たとえば 50px) のアイテムがたくさんあるスクロール可能な領域、コンテナー div があります。

新しいコンテンツを追加すると、div の高さが徐々に増加します (つまり、新しいコンテンツは高さがゼロから増加するようにアニメーション化されます。これらはすべて CSS トランジションです。

スクロール可能な div を下部に「固定」して、スクロール可能な div のコンテンツ領域が下向きではなく上向きに拡張されるようにする方法があります。

を使用しないソリューションをお勧めしますsetInterval()。

以下のコメントに返信してください。

ソースはDownload-To-Dropbox/srcにあります (Coffee と Stylus にあります)。

http://dtd.heroku.comにアクセスしてみてください(これがライブ コピーです)。ディレクトリが右側に展開され、親ディレクトリが左側に押し出されていることがわかります (基本的には、Finder – Mac の列ビューに似ています)。

ここでの問題は、複数のダブディレクトリにドリルダウンして水平スクロールバーが表示されると、開いた新しいディレクトリが画面の右側に隠れてしまうことです。移行期間中ずっと表示されるようにしたいと思います。

4

1 に答える 1

0

あなたdivの ID が であるとしますscrolldiv。にコンテンツを追加する基本的な関数は次のdivとおりです。

var dv = document.getElementById("scrolldiv");
dv.innerHTML += "<div class = 'entry' style = 'height: 0px;'>New Entry</div>";
animateAdd(1000); //animation lasts for 1000 ms (1 s)

関数のプロトタイプは次のanimateAddとおりです。

function animateAdd(duration) {
    var stepDur = duration / 50;
    var curHeight = 0;
    var dv = document.getElementById("scrolldiv");
    var lstDv = dv.getElementsByTagName("div");
    var newDv = lstDv[lstDv.length - 1];
    function doAnim() {
        if(curHeight >= 50) {
             //we're done!
             return;
        }
        curHeight ++;
        dv.scrollTop ++;
        newDv.style.height = curHeight + "px";
        setTimeout(doAnim, stepDur);
    }
    doAnim();
}

デモ:小さなリンク.

何らかの形でお役に立てば幸いです！

于 2012-08-18T13:41:50.183 に答える