add: 列表自动滚动到底部

Frontend/Pages/_Host.cshtml

@@ -32,5 +32,6 @@
 <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
 <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
 <script src="_framework/blazor.server.js"></script>
+<script src="js/helper.js"></script>
 </body>
 </html>

Frontend/Shared/ChatZone.razor

@@ -1,8 +1,9 @@
 @using Frontend.Models
 @using Katheryne.Abstractions
+@inject IJSRuntime JsRuntime
 
 <div class="content-zone">
-    <div class="chat-zone">
+    <div class="chat-zone" id="chat-scroll-zone">
         <AntList TItem="ChatMessage" DataSource="@Messages" Split="@false">
             <ListItem>
                 @if (context.Left)
@@ -76,6 +77,15 @@
         base.OnInitialized();
     }
 
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            JsRuntime.InvokeVoidAsync("scrollToSection");
+        }
+        base.OnAfterRender(firstRender);
+    }
+
     private void SendMessageClicked()
     {
         if (string.IsNullOrWhiteSpace(MessageSending))

Frontend/wwwroot/js/helper.js

@@ -0,0 +1,7 @@
+function scrollToSection() {
+    let element = document.getElementById("chat-scroll-zone")
+    element.scrollTo({
+        top: element.scrollHeight - element.offsetHeight,
+        behavior: "smooth"
+    })
+}