使用JavaScript滾動溢出DIV

我有一個使用overflow的div：auto將div內容保留在div內，因爲它被調整大小並在頁面上拖動。我使用一些Ajax從服務器檢索文本行，然後將它們追加到div的末尾，以便內容向下增長。每次發生這種情況時，我都想使用JS將div滾動到底部，以便最近添加的內容可見，類似於聊天室或命令行控制檯的工作方式。使用JavaScript滾動溢出DIV

到目前爲止，我一直在使用這個片段來做到這一點（我也使用jQuery，因此$（）函數）：

$("#thediv").scrollTop = $("#thediv").scrollHeight;

但是它已經給我不一致的結果。有時它有效，有時不起作用，如果用戶調整了div的大小或手動移動滾動條，它就完全停止工作。

目標瀏覽器是Firefox 3，它被部署在一個受控環境中，所以它根本不需要在IE中工作。

任何想法傢伙？這個讓我難住。謝謝！

來源

2008-08-16 Bob Somers

scrollHeight應該是內容的總高度。 scrollTop指定要顯示在元素客戶區頂部的內容的像素偏移量。

所以，你真的想（仍然使用jQuery）：

$("#thediv").each(function() 
{ 
    // certain browsers have a bug such that scrollHeight is too small 
    // when content does not fill the client area of the element 
    var scrollHeight = Math.max(this.scrollHeight, this.clientHeight); 
    this.scrollTop = scrollHeight - this.clientHeight; 
});

...這將設置滾動偏移到最後clientHeight價值的內容。

來源

2008-08-16 21:10:20 Shog9

使用循環遍歷一個元素的jQuery效率相當低。當選擇一個ID時，你可以使用get（）或[]符號檢索jQuery的第一個和唯一元素。

var div = $("#thediv")[0]; 

// certain browsers have a bug such that scrollHeight is too small 
// when content does not fill the client area of the element 
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight); 
div.scrollTop = scrollHeight - div.clientHeight;

來源

2008-08-18 12:09:39

不是那麼低效，因爲它只會迭代一次。然而，如果你打算在一秒鐘內運行幾次`each`，你肯定會注意到每次使用[0]時創建一個函數範圍的開銷;） – Kato 2011-11-29 00:01:04

scrollIntoView

的scrollIntoView方法滾動元件到視圖中。

來源

2009-04-12 16:12:24 troelskn

這在移動設備上不起作用，截至2015年9月。 – phreakhead 2015-09-11 07:17:30

$("#thediv").scrollTop($("#thediv")[0].scrollHeight);

來源

2011-09-30 02:19:26 peterbrown

-1

我有一個div包裝爲浮動左，其內容正在調整這3個div的。當您嘗試解決此問題時，它有助於爲div包裝打開時髦的邊框/背景。問題是調整大小的div內容溢出了div封裝外（並且流失到封裝下面的內容區域之下）。

使用@ Shog9的答案解決上面。至於適用於我的情況，這是HTML佈局：

<div id="div-wrapper"> 
    <div class="left-div"></div> 
    <div id="div-content" class="middle-div"> 
    Some short/sweet content that will be elongated by Jquery. 
    </div> 
    <div class="right-div"></div> 
</div>

這是我的jQuery來調整DIV-包裝：

<script> 
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content"); 
//now I need to resize the div... 
var contentHeight = $('#div-content').prop('scrollHeight') 
$("#div-wrapper").height(contentHeight); 
</script>

要注意，$（ '＃DIV內容'） .prop（'scrollHeight'）產生包裝需要調整大小的高度。此外，我不知道任何其他方式來獲得scrollHeight一個實際的jQuery函數; $（'＃div-content'）。scrollTop（）和$（'＃div-content'）。height都不會產生真正的內容高度值。希望這可以幫助那裏的人！

來源

2013-10-25 20:34:39 ObjectiveTC

使用JavaScript滾動溢出DIV

回答

相關問題