仅当用户将滚动条移动到底部时，才如何在底部保持动态滚动？

Question

I have a scrollview which has content that is being refreshed (increasing it's size) by a ajax query.

I want that (like commonly in all the ides) when the user has the scroll on the bottom, the scroll must be mantained in the bottom even when adding more text.

I tryed to find when the scroll is in the bottom with this code:

var scrollDiv = $('#modalText');
var height = scrollDiv[0].scrollHeight;
if (scrollDiv[0].scrollTop==height){
 //scroll is in the bottom, must force the scroll to bottom
}else{
 //scroll is not in the bottom, must maintain the scroll point
}

The problem is that scrollDiv[0].scrollTop is not equal to scrollDiv[0].scrollHeight when the user has the scroll in the bottom I can't understand why, but it's about 900 pixels less!

Does anyone has any solution for this?

Answer 1

you need to add the height to scrollTop to get scrollBottom

 var scrollDiv = $('#modalText'); function add() { var height = scrollDiv[0].scrollHeight; var scroll = scrollDiv[0].scrollTop + scrollDiv[0].offsetHeight; scrollDiv.append('<p>' + Number(new Date()) + '</p>'); if (scroll == height) { //scroll is in the bottom, must force the scroll to bottom scrollDiv.scrollTop(height); } else { //scroll is not in the bottom, must maintain the scroll point } }; 

 #modalText { max-height: 180px; overflow: auto; width: 200px; background-color: #f5f5f5; padding: 10px; box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="add()">Add</button> <div id="modalText"></div> 

Answer 2

The difference of 900 you are facing is because because of the viewport/client height. If you add that to the calculations you'll see that find that scrollHeight == scrollTop + clientHeight . You may review this at Mozilla Foundation's documentation of scrollHeight .