jQuery - прокрутка div с переполнением-y: прокрутка;

Question

У меня есть div, который содержит список сообщений (это приложение для чата). Поскольку каждое сообщение добавляется в нижнюю часть списка, я думаю Я хочу, чтобы div прокручивался в нижней части страницы. Это имеет смысл, не так ли? Итак - вопросы № 1: как мне получить div для прокрутки до дна?

Теперь, следующий вопрос немного об удобстве использования. Что делать, если пользователь прокручивается, чтобы читать что-то, что было ранее опубликовано? Тогда вдруг кто-то отправляет новое сообщение? Это означает, что jQuery снова прокрутится вниз. Это может очень раздражать пользователя. Каков хороший способ справиться с этим? Должна ли она прокручиваться вниз, если полоса прокрутки прокручивается полностью до того, как будет добавлено новое сообщение? Если да, то как это сделать в jQuery? Или есть более удобное решение?

Answer 1

вы можете получить положение полосы прокрутки на window.pageYOffset, а затем использовать window.scrollTo(0, y) для прокрутки до какого-либо места.

или вы можете использовать $('#mydiv').scrollTop(newmsg_top) в jquery для прокрутки вниз до нового сообщения.

где var newmsg_top = parseInt($('#mydiv li:last').offset().top);

здесь #mydiv является ДИВ со всеми вашими сообщениями.
так #mydiv li:last указывает на последнее сообщение.
offset() возвращает текущую позицию элемента относительно документа, и вы можете получить верхнюю позицию .top

Если вы хотите, относительное положение по отношению к родителю вместо этого вы можете пойти с position()

EDIT:Получил jsfiddle, работающий здесь here. Взгляни, пожалуйста. . Примечание: Вы идете вниз, только если вы читаете последний элемент (для решения вашей проблемы юзабилити)

Answer 2

// это будет прокручиваться до конца, после добавления

$("#mydiv").append("My data"); 
var newmsg_top = parseInt($('#mydiv')[0].scrollHeight); 
$('#mydiv').scrollTop(newmsg_top);