How to 'scroll' a panel to the end? Javascript + ASP.NET

Question

I have an ASP.NET panel that shows recent messages and I want the scroll to always remain at the end (messages are from bottom to top, as in Whatsapp).

My problem is that I can’t at all make the scroll stay at the end. Here’s what I’ve tried and it didn’t work:

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>

How am I calling the job:

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

The strange thing is that with the following gambit, it works:

function scrollMsgs() {
        setTimeout(function () {
            let objDiv = document.getElementById("pnlMsgs");
            objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
    }, 1);
}

Answer 1

To ensure that your script will only run after page loading, you need to add a script block waiting for window.onload

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

You can facilitate by adding an anchor to the end of the panel.

<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>

And change the javascript to scroll to that element.

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

See the example below:

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>