溢出：隱藏但讓內容自動滾動

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?