0

Tenho um painel do ASP.NET que mostra mensagens recentes e quero que o scroll sempre permaneça no fim (as mensagens são de baixo pra cima, como no WhatsApp).

Meu problema é que não consigo de jeito nenhum fazer o scroll ficar sempre no fim. Aqui está o que já tentei e não funcionou:

JS:

function scrollMsgs() {
    var pnl = document.getElementById("pnlMsgs");
    pnl.scrollTop = pnl.scrollHeight;
}

HTML:

<div class="row mb-4">
    <div class="col-12 rounded" id="divMsgs">
        <asp:Panel ID="pnlMsgs" runat="server">
            <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
        </asp:Panel>
    </div>
</div>

Como estou chamando a função:

Protected Sub cmdPerguntar_Click(sender As Object, e As EventArgs) Handles cmdPerguntar.Click

    ...

    lblMsg.Text &= "texto texto texto texto [...]\n"

    Page.ClientScript.RegisterStartupScript(Page.GetType, "ScrollMsgs", "scrollMsgs();", True)
End Sub

O estranho é que com a seguinte gambiarra, funciona:

function scrollMsgs() {
        setTimeout(function () {
            let objDiv = document.getElementById("pnlMsgs");
            objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
    }, 1);
}
7
  • Apresente o seu hmtl ou a view ou o markup Commented 10/12/2020 às 18:58
  • Editei a pergunta e coloquei a parte do painel Commented 11/12/2020 às 12:01
  • O Scroll é só dentro da divMsgs? Commented 11/12/2020 às 12:43
  • Sim. Consegui resolver botando um timeout pra esperar 1 milisegundo pra executar a função JavaScript e funcionou, mas isso é gambiarra. Me parece que o VB.NET faz tudo de uma vez só ao invés do C# que faz passo a passo Commented 11/12/2020 às 12:59
  • Isso não tem nada a ver com c# e vb.net... você está confundindo as coisas e precisa entender como é o clico do asp.net no servidor e no cliente. Commented 11/12/2020 às 13:20

1 Resposta 1

1

Para garantir que o seu script só vai ser executado após o carregamento da página, você precisar adicionar um bloco de script esperando o window.onload

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "script", "window.onload = ()=> {scrollMsgs();}", True);

Você pode facilitar adicionando uma âncora ao final do painel.

<div class="row mb-4">
    <div class="col-12 rounded" id="divMsgs">
        <asp:Panel ID="pnlMsgs" runat="server">
            <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
            <a id="fimDoPainel"/>
        </asp:Panel>
    </div>
</div>

E mudar o javascript para fazer o scroll até aquele elemento.

function scrollMsgs() {
  var pnl = document.getElementById("pnlMsgs");
  var ancora = document.getElementById("fimDoPainel");  
  pnl.scrollTop = ancora.offsetTop;
}

Veja o exemplo abaixo:

function scrollMsgs() {
  var pnl = document.getElementById("pnlMsgs");
  var ancora = document.getElementById("fimDoPainel");  
  pnl.scrollTop = ancora.offsetTop;
}

scrollMsgs();
#pnlMsgs{
  display:block;
  height: 100px;
  overflow-y: scroll;
}
<div class="row mb-4">
  <div class="col-12 rounded" id="divMsgs">
    <div ID="pnlMsgs">
      <span ID="lblMsg">
        teste <br>
        teste <br>
        teste <br>
        teste <br>
        teste <br>
        teste <br>
        teste <br>
        teste <br>
        teste <br>
        teste <br>
      </span>
      <a id="fimDoPainel"/>
    </div>
  </div>
</div>

5
  • Muito obrigado pela ajuda mas não funcionou meu amigo, o scroll continua voltando pro topo Commented 11/12/2020 às 15:13
  • @NatanFernandes veja a edição da restposta Commented 11/12/2020 às 15:23
  • Funcionou! Muito obrigado. Não sabia que a pagina era recarregada Commented 11/12/2020 às 15:28
  • Se você não está usando Ajax a cada postback realizado no click do botão, a página é recarregada Commented 11/12/2020 às 15:29
  • Entendi. Só trocando a parte do ScriptManager já resolveu meu problema, era isso mesmo Commented 11/12/2020 às 15:35

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 .