Question

我有一个div元素和一个简单的样式表：

CSS：

.container{
    width:200px;
    max-height:200px;
    border:1px solid red;
    overflow-y:scroll;
}

HTML：

<div class="container">
</div>

我有一个向div添加内容的按钮，因为你知道div的高度增长然后有一个滚动条。当我向容器添加新内容时，我想显示最后添加的项目。我尝试使用具有无限值的scrollTop() jQuery函数，但它没有用。有什么想法吗？

The Fiddle

编辑：由于使用max-height，height属性的最大值为200。所以我无法使用这种方法：

$(".container").scrollTop($(".container").heigth());

现在，我可以这样做：

$(".container").scrollTop(10000);

它正在工作，但我认为这不是一个好主意！

更新

感谢Nicole Van的简单而出色的方法！我改变了她的解决方案：The Updated Fiddle

Answer 1

你是如何加入的？附加还是预先加载？

我的意思是你可以获得容器的新高度，scrollTo如果追加你的新身高，或scrollTo 0如果预先增加

---编辑这就是诀窍：

$(".add").click(function(){
    i++;
    var s ="<p>added value "+i+" ! </p>";
    $(".container").append(s);
    var heightContainer = $(".container").height();
    $(".container").scrollTop(heightContainer);
});

----- ------- EDIT 这就是它，它总是超越它的内在高度，所以它有效，甚至不准确：

var i=0;
$(".add").click(function(){
    i++;
    var s ="<p>added value "+i+" ! </p>", heightContainer;
    $(".container").append(s);
    heightContainer = $(".container").height() * i;
    $(".container").scrollTop(heightContainer);
});

理想的解决方案是您知道要插入的元素的高度，因此heightContainer将为elemHeight * i

Answer 2

 function ScrollToBottom(){
     var d = document.getElementById("MyDiv");
     d.scrollTop = d.scrollHeight;
}

在这里看看其他一些jQuery解决方案：

Scroll to bottom of div?

始终在底部按住滚动条

2 个答案: