0

基本上我有一个可滚动的区域，一个容器 div，有很多固定高度的项目（比如 50 像素）。

添加新内容时，div 的高度会逐渐增加（即新内容的动画使其高度从零开始增加。所有这些都是 CSS 过渡。

现在有一种方法可以将可滚动 div '锚定'到底部，以便可滚动 div 中的内容区域向上而不是向下扩展。

我更喜欢不使用setInterval().

回复下面的评论。

来源位于Download-To-Dropbox/src（它们位于 Coffee 和 Stylus 中）。

尝试访问http://dtd.heroku.com（那是 Live Copy）。您会看到目录在右侧展开，将父目录推向左侧（基本上就像 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 回答