Nối nội dung div và di chuyển/động xuống dưới

Question

Tôi đang cố gắng để thực hiện một cuộn div xuống đáy sau khi thêm nội dung mới (sử dụng thêm)

Dưới đây là phần chính:

$('#textdiv').append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>'); 

$('#textdiv').animate({scrollTop: $('#textdiv').height()}, 1000); 

Xem/thử nó trong fiddle: http://jsfiddle.net/5ucD3/7/

Rất lỗi .. Nó không cuộn xuống dưới cùng (chỉ có thể ở một vài phụ lục đầu tiên). Khi tôi cuộn xuống và thêm nội dung mới, nó cuộn lên. Đôi khi nó không animate chút nào.

Tôi làm cách nào để nó hoạt động luôn? Tôi tìm tôi phải bằng cách nào đó có được đúng chiều cao, nhưng không biết làm thế nào

Answer 1

Tôi đã tìm được cách hoạt động:

$('#textdiv').animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500); 

http://jsfiddle.net/5ucD3/13/

Answer 2

Tôi đã chỉnh sửa và thử nghiệm mã của bạn:

var div = $('#textdiv'), 
    height = div.height(); 

$('#add').on('click', function(){ 
    div.append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>'); 
    div.animate({scrollTop: height}, 500); 
    height += div.height(); 
}); 

Hãy thử nó ra sống trong jsFiddle

Answer 3

Tôi trễ một lần nữa, nhưng đây là hai xu của tôi.

Đôi khi khi đo các yếu tố động chỉ sử dụng một lần đọc có thể sai hướng vì nội dung được nối thêm có thể dài hoặc vì yêu cầu ($ .get, $ .post, $ .ajax, v.v ...) cho nội dung vẫn còn trong không khí. Nếu chuỗi được nối thêm là từ một yêu cầu, thì bạn phải sử dụng một phương thức gọi lại để gắn thêm phản hồi.

Điều tốt nhất bạn có thể làm là chuỗi nó lại với nhau như thế này, bởi vì javascript "nên" giải quyết các chức năng đồng bộ thời trang:

$("#textdiv").append('The longest string ever parsed goes here.') 
.animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500); 

Nhưng bạn nói đúng, phương pháp này có xu hướng được nhiều lỗi, đặc biệt là trong khi đối phó với các div biến đổi đủ nhanh.

Đó là lý do tại sao nếu bạn muốn có thêm chắc chắn rằng công việc được thực hiện, bạn có thể sử dụng một Interval:

var scroll_to_bottom = function(element){ 
    var tries = 0, old_height = new_height = element.height(); 
    var intervalId = setInterval(function() { 
     if(old_height != new_height){  
      // Env loaded 
      clearInterval(intervalId); 
      element.animate({ scrollTop: new_height }, 'slow'); 
     }else if(tries >= 30){ 
      // Give up and scroll anyway 
      clearInterval(intervalId); 
      element.animate({ scrollTop: new_height }, 'slow'); 
     }else{ 
      new_height = content.height(); 
      tries++; 
     } 
    }, 100); 
} 

$('#textdiv').append('The longest string ever parsed goes here.'); 
scroll_to_bottom($('#textdiv')); 

Phương pháp này không thể đánh bại một callback hoặc một dòng chức năng đơn giản, nhưng nó giải quyết vấn đề nếu bạn không biết chính xác thời điểm phụ thêm sẽ kết thúc.