Question

基本上我有一个可滚动的区域，一个容器div，有大量固定高度的物品（比如50px）。

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

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

我更喜欢不使用setInterval()的解决方案。

回复以下评论。

来源位于Download-To-Dropbox/src（他们在咖啡和手写笔中）。

尝试转到http://dtd.heroku.com（这是实时副本）。您将看到右侧的目录展开，将父目录推向左侧（基本上就像Finder中的列视图 - Mac）。

这里的问题是，一旦你钻入多个配音目录并出现水平滚动条，打开的新目录将隐藏在屏幕右侧。我想让它在整个过渡期间都可见。

Answer 1

假设您的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();
}

演示：little link。

希望以任何方式帮助你！

可滚动的div - 添加内容时粘贴（或锚定）到底部

1 个答案: