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

Question

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

Asked 3 years, 11 months ago

Viewed 31 times

0

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

Present your hmtl or view or Markup

– Leandro Angelo

2020/12/10 at 18:58
I edited the question and put the panel part

– Natan Fernandes

2020/12/11 at 12:01
The Scroll is only inside the divMsgs?

– Leandro Angelo

2020/12/11 at 12:43
Yes. I was able to solve it by putting a timeout to wait 1 millisecond to run the Javascript function and it worked, but this is gambiarra. It seems to me that VB.NET does everything at once instead of the C# that does it step by step

– Natan Fernandes

2020/12/11 at 12:59
This has nothing to do with c# and Vb.net... you are confusing things and you need to understand what the Asp.net click on the server and the client looks like.

– Leandro Angelo

2020/12/11 at 13:20
Edit your question presenting the real problem and how you were calling the function

– Leandro Angelo

2020/12/11 at 13:36
I edited the answer

– Natan Fernandes

2020/12/11 at 15:10

Show 2 more comments

1 answer

Browser other questions tagged javascript asp.net

You are not signed in. Login or sign up in order to post.

by Leandro Angelo • **9,330** points · Answer 1 · 2020-12-11T13:13:59+00:00

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>