Cuộn các DIV tràn với JavaScript

Question

Tôi đã có một div sử dụng tràn: tự động lưu giữ nội dung bên trong div khi được thay đổi kích thước và kéo xung quanh trang. Tôi đang sử dụng một số ajax để lấy dòng văn bản từ máy chủ, sau đó nối chúng vào cuối div, vì vậy nội dung đang phát triển xuống dưới. Mỗi lần điều này xảy ra, tôi muốn sử dụng JS để cuộn div xuống dưới cùng để nội dung được thêm gần đây nhất có thể nhìn thấy, tương tự như cách phòng trò chuyện hoặc bảng điều khiển dòng lệnh hoạt động.

Cho đến nay tôi đã sử dụng đoạn mã này để làm điều đó (tôi cũng đang sử dụng jQuery, vì thế mà $() chức năng):

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

Tuy nhiên nó được đem lại cho tôi kết quả không phù hợp. Đôi khi nó hoạt động, đôi khi không, và nó hoàn toàn chấm dứt hoạt động nếu người dùng thay đổi kích thước div hoặc di chuyển thanh cuộn theo cách thủ công.

Trình duyệt mục tiêu là Firefox 3 và trình duyệt đích được triển khai trong môi trường được kiểm soát để không cần phải hoạt động trong IE.

Bất kỳ ý tưởng nào? Cái này khiến tôi bối rối. Cảm ơn!

Answer 1

scrollHeight phải là tổng chiều cao của nội dung. scrollTop chỉ định độ lệch pixel vào nội dung đó được hiển thị ở đầu khu vực ứng dụng của phần tử.

Vì vậy, bạn thực sự muốn (vẫn còn sử dụng 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; 
}); 

... mà sẽ thiết lập các cuộn bù đắp cho clientHeight giá trị cuối cùng của nội dung.

Answer 2

Sử dụng vòng lặp để lặp qua jQuery của một phần tử là không hiệu quả. Khi chọn một ID, bạn chỉ có thể lấy phần tử đầu tiên và duy nhất của jQuery bằng cách sử dụng ký hiệu get() hoặc ký hiệu [].

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; 

Answer 3

scrollIntoView

Các scrollIntoView phương pháp cuộn các yếu tố vào xem.

Answer 4

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

Answer 5

Tôi đã có một div gói 3 divs rằng đang lơ lửng bên trái, và có nội dung đã được thu nhỏ. Nó giúp biến biên giới màu sắc sôi nổi/nền cho div-wrapper khi bạn cố gắng giải quyết vấn đề này. Vấn đề là nội dung div đã thay đổi kích cỡ đã tràn ra ngoài gói div-wrapper (và được đổ xuống bên dưới vùng nội dung bên dưới trình bao bọc).

Được giải quyết bằng cách sử dụng câu trả lời của @ Shog9 ở trên. Như áp dụng cho hoàn cảnh của tôi, đây là cách bố trí 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> 

Đây là jQuery của tôi để thay đổi kích thước div-wrapper:

<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> 

Để lưu ý, $ ('# div-content') .prop ('scrollHeight') tạo ra chiều cao mà trình bao bọc cần thay đổi kích thước thành. Ngoài ra tôi không biết về bất kỳ cách nào khác để có được scrollHeight một chức năng jQuery thực tế; Không có $ ('# div-content'). ScrollTop() và $ ('# div-content'). Chiều cao sẽ tạo ra các giá trị nội dung-chiều cao thực. Hy vọng điều này sẽ giúp ai đó ra khỏi đó!