Eu tenho uma div que contém uma lista de mensagens (é um aplicativo de bate-papo). À medida que cada mensagem é adicionada ao final da lista, eu pensar Quero que a div seja rolada para o final da página. Isso faz sentido, certo? Então - perguntas 1: como faço para que a div role para baixo?
Agora, a próxima pergunta é um pouco sobre usabilidade. E se o usuário rolar para cima para ler algo que foi postado anteriormente? Então, de repente, alguém posta uma nova mensagem? Isso significa que o jQuery rolará para baixo novamente. Isso pode ser muito irritante para o usuário. Qual é uma boa maneira de lidar com isso? Ele deve rolar para baixo apenas se a barra de rolagem já estiver rolada para baixo até que uma nova mensagem seja adicionada? Se sim, como fazer isso no jQuery? Ou existe uma solução mais utilizável?
Respostas:
2 para resposta № 1você pode obter a posição da barra de rolagem window.pageYOffset e depois usar window.scrollTo(0, y) para rolar para algum lugar.
ou você pode até usar $("#mydiv").scrollTop(newmsg_top) no jquery para rolar para baixo até a nova mensagem.
Onde var newmsg_top = parseInt($("#mydiv li:last").offset().top);
Aqui #mydiv é o div com todas as suas mensagens.
assim #mydiv li:last aponta para a última mensagem.
offset() retorna a posição atual do elemento em relação ao documento e você pode obter a posição superior pressionando .top
Se você deseja a posição relativa em relação aos pais, pode ir com position()
EDITAR: Tem um jsfiddle trabalhando aqui Aqui. Por favor dê uma olhada.</ strong> Nota: Você desativa apenas se estiver visualizando o último elemento. (Para a solução do seu problema de usabilidade)
1 para resposta № 2
// isto é rolará até o final, depois de acrescentar
$("#mydiv").append("My data");
var newmsg_top = parseInt($("#mydiv")[0].scrollHeight );
$("#mydiv").scrollTop(newmsg_top);