Как поддерживать динамический свиток внизу, только если пользователь перемещает его вниз?

Question

У меня есть scrollview, у которого есть контент, который обновляется (увеличивая его размер) с помощью запроса ajax.

Я хочу, чтобы это (как обычно во всех идах), когда у пользователя есть свиток внизу, прокрутка должна поддерживаться снизу даже при добавлении большего текста.

I судимое найти, когда свиток находится в нижней части с этим кодом:

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 
} 

Проблема в том, что scrollDiv [0] .scrollTop не равна scrollDiv [0] .scrollHeight, когда пользователь имеет прокрутка внизу я не могу понять, почему, но это примерно на 900 пикселей меньше!

У кого-нибудь есть решение?

Answer 1

Разница в 900, с которой вы сталкиваетесь, связана с тем, что из-за высоты видового экрана/клиента. Если вы добавите это к вычислениям, вы увидите, что найдете это scrollHeight == scrollTop + clientHeight. Вы можете просмотреть это в документации Mozilla Foundation по адресу scrollHeight.

Answer 2

вам нужно добавить height к scrollTop, чтобы получить 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>