0

Estou construindo um mini fórum, e nele, os usuários podem fazer posts e respondê-los.

Para a página não ficar muito longa, eu coloquei uma div com uma altura e largura fixas, e, se o texto passar desse valor, ele irá acrescentar uma barra de rolagem,

O problema é:

Eu utilizo o AJAX para atualizar as respostas de tempos em tempos, e sempre que eu atualizo,e ele volta a barra de rolagem para a posição inicial, queria saber se tem como eu pegar a posição atual da barra de rolagem dentro da div, e quando atualizar com o ajax, ele voltar a barra nessa posição.

Esse é o código do AJAX:

<script type="text/javascript">
$(document).ready(function(){
    comeca();
})
var timerR = false;
var timerI = null;
function para(){
    if(timerR)
        clearTimeout(timerI)
    timerR = false;

}
function comeca(){
    para();
    lista();
}
function lista(){
 $.ajax({
        url:"qrTopico.php",
        type: "GET",
        dataType: 'html',
        data: {topico : "<?php echo $topicoGet; ?>"},
        success: function (textStatus){
              $('#respostas').html(textStatus); //mostrando resultado
        }
    })
    timerI = setTimeout("lista()", 10000);//tempo de espera
    timerR = true;
}
</script>

2 Respostas 2

0

Como não posso comentar, vou deduzir que você está destruindo os elementos e populando novamente de acordo com o que você retorna em sua requisição Ajax, caso esteja fazendo isso, esse comportamento de a barra ir para o topo é de se esperar.

Sugiro que você faça um incremento dos dados que estão sendo atualizados nos elementos que já estão criados, assim a barra de rolagem ira manter sua posição atual.

2
  • Faz sentido... Mas teria como você postar algum código ou me direcionar pra algum tópico que me ajude com isso? Commented 1/11/2016 às 1:10
  • Para eu postar algum código, preciso pelo menos do seu código de requisição do Ajax e ver a melhor maneira de fazer o incremento das informações. Commented 1/11/2016 às 12:14
0

Você deve gravar o conteudo de window.scrollTop em uma variavel antes de abrir o campo de edição e após salvar ou recarregar algo com ajax, também pode-se usar via jQuery (já que usou a tag )

Ficaria algo como:

function atualizaScroll(lastScrollY)
{
    $('#respostas').scrollTop(lastScrollY);
}

function atualizarDados()
{
    var lastScrollY = $('#respostas').scrollTop();

    $.ajax("pagina.php", {
        ... //Dados da requisição aqui
    }).done(function () {
       //Completa a requisição
    }).fail(function () {
       //mostra erro
    }).complete(function () {
       /*
        * Executa mesmo com erro ou sucesso
        * (restaura posição do scroll)
        *
        * Delay é para evitar algo com o tempo da renderização
        */

       setTimeout(atualizaScroll, 10, lastScrollY);
    });
}
17
  • Eu testei o código acima, mas aparentemente ele funcionaria bem se fosse o scroll "global" da página, no meu caso, eu precisaria que esse comportamento acontecesse com o scroll dentro de uma Div. Como eu faria isso? Commented 1/11/2016 às 15:56
  • @kyro23 a sim entendi, falha minha, vou editar :)
    – Syzoth
    Commented 1/11/2016 às 15:58
  • @kyro23 corrigi o código e corrigi o setTimeout também, me avisa se falhar ;)
    – Syzoth
    Commented 1/11/2016 às 16:00
  • @kyro23 ué, o exemplo não funcionou? Você não deu retorno
    – Syzoth
    Commented 2/11/2016 às 17:43
  • Então, eu não dei retorno porquê passei um boom tempo procurando a solução para esse problema, e pelo que eu entendi, é um pouco mais complexo que só o scroll da div... Basicamente eu vou ter que fazer long pooling para manter uma conexão aberta com o servidor, e verificar se o resultado mudou, ai sim, quando ele mudar, eu exibo a nova informação na tela. O problema é que como eu quero fazer o site rodar em um servidor, eu vou ter que usar web sockets pra fazer essa conexão, então eu ainda to estudando qual seria a melhor solução. Mas valeu pela ajuda! Commented 3/11/2016 às 17:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .