Làm thế nào để giữ một div cuộn xuống dưới cùng vì nội dung HTML được nối vào nó qua jquery, nhưng ẩn thanh cuộn?

Question

Dưới đây tôi có một mô phỏng dựa trên js nhỏ cho các công cụ lệnh khác nhau. Người dùng nhập vào một lệnh, và nếu nó đúng, nó sẽ hiển thị nó ở trên cùng. Để sử dụng trong tương lai, tôi cần đảm bảo rằng nó có thể xử lý nhiều lệnh khi cần trước khi hoàn thành mô phỏng. Điều này có nghĩa là chắc chắn tôi sẽ có nội dung tràn.

Giải pháp của tôi bây giờ đã thiết lập tràn Y thành tự động, thêm thanh cuộn và một chút jquery để giữ khách hàng cuộn xuống dưới cùng của div đầu ra mọi lúc, bởi vì nội dung đang được nối dưới nội dung trước đó thời gian người dùng nhập đúng lệnh.

Hiện tại, tính năng này hoạt động tốt, ngoại trừ tôi muốn xóa thanh cuộn. Tôi muốn nội dung để hành xử theo cùng một cách tràn tự động sẽ và không, ngoại trừ không có một thanh cuộn nhìn thấy được.

Có cách nào tôi có thể làm điều này với jquery hoặc javascript?

Tôi biết tôi có thể làm một số thủ thuật css để đặt một số loại màu đen trên thanh cuộn với chỉ mục z, nhưng tôi muốn tránh điều đó nếu có thể.

Answer 1

Tất cả bạn cần là thêm overflow: hidden để container của bạn và di chuyển nó một lần nội dung được nạp:

div.scrollTop = div.scrollHeight; 

Demo http://jsfiddle.net/nT75k/2/

Answer 2

Vâng, bạn có thể thêm một người biết lắng nghe sự kiện và khi sự kiện đó được phát ra, bạn có thể có nó di chuyển xuống phía dưới bằng cách kiểm tra chiều cao như vậy

$container = $('.container'); 
$container[0].scrollTop = $container[0].scrollHeight; 

$('.input').keypress(function (e) { 
    if (e.which == 13) { 
    $container = $('.container'); 
    $container.append('<p class="row">' + e.target.value + '</p>'); 
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow"); 
    } 
}); 

http://jsfiddle.net/w2qbe/

Answer 3

Tiếp tục sử dụng javascript để làm di chuyển, và đặt div chứa mô phỏng của bạn bên trong div khác đó là hơi ít rộng và làm tràn ẩn trên div bên ngoài. Tôi đã sử dụng kỹ thuật này một vài lần, và nó khá thú vị.

Điều duy nhất bạn nên cẩn thận là thanh cuộn có độ rộng hơi khác nhau trong các trình duyệt khác nhau, vì vậy hãy cẩn thận.

ví dụ:

html:

<div id="outside"> 
    <div id="inside"> 
     <div>more content 1</div> 
     <div>more content 2</div> 
     <div>more content 3</div> 
     <div>more content 4</div> 
     <div>more content 5</div> 
     <div>more content 6</div> 
     <div>more content 7</div> 
     <div>more content 8</div> 
     <div>more content 9</div> 
     <div>more content 8</div> 
     <div>more content 7</div> 
     <div>more content 6</div> 
     <div>more content 5</div> 
     <div>more content 4</div> 
     <div>more content 3</div> 
     <div>more content 2</div> 
     <div>more content 1</div> 
    </div> 
</div> 

css:

div#outside { 
    width: 120px; 
    height: 100px; 
    overflow: hidden; 
} 

div#inside { 
    width: 135px; 
    height: 100px; 
    overflow-y: auto; 
} 

Check-out fiddle này ->http://jsfiddle.net/5bkz5/1/ < - và cuộn xuống trên văn bản!

Answer 4

div.scrollTop = div.scrollHeight;

nhưng bạn không cần overflow: hidden.