溢出：隐藏但让内容自动滚动

Question

我有一个div，其中的内容通过查询的append()定期追加到它。随着内容变长，它最终会溢出div。我想在溢出时不出现滚动条，但仍然会滚动内容以显示下面的新内容。

这可能吗？当我使用overflow-x: hidden时，没有滚动条出现，但内容被隐藏。

Answer 1

如果容器的大小是固定的，你可以把绝对定位的包裹里面的内容，像这样：

<div class="container"> 
    <div class="wrap"> 
     <p>bah</p> 
    </div> 
</div> 

和css：

.container { 
    y-overflow: hidden; 
    position: relative; 
    height: 200px; 
    width: 200px; 
} 

.wrap {position:absolute; bottom: 0; left:0;right:0; 
} 

http://jsfiddle.net/sXGd9/

Answer 2

append()会最后加入内容。您可能需要prepend()新内容，因此数据会在旧内容之前添加。

至于overflow，您可以将其设置为scroll，以便在必要时显示滚动条或hidden，因此不会出现滚动条，但内容将不可见。否则，您可以将其设置为visible，以便它可见但滚动条不会出现。

你想让溢出的内容可见吗？如果这样设置overflow: visible，否则设置为overflow: hidden（因为你不需要滚动条）。 无论如何，你无法滚动内容。如果你需要滚动，你必须建立自己的滚动系统，添加事件处理程序到你的容器。

Answer 3

如果你已经在你的“#container的”每个附加内容DIV包裹在一个单独的“.append” DIV，你可以这样做：

var pos = $('#container div:last').position(); 
$('#container').scrollTop(pos.top); 

这是有益的？

其他解决方案可以在较早的帖子中找到： How do I scroll a row of a table into view (element.scrollintoView) using jQuery?