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);
}
divMsgs
?