add: 列表自动滚动到底部

This commit is contained in:
jackfiled 2023-10-16 14:34:17 +08:00
parent 4c6d35421a
commit a7e784ba65
3 changed files with 19 additions and 1 deletions

View File

@ -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/loader.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.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="_framework/blazor.server.js"></script>
<script src="js/helper.js"></script>
</body> </body>
</html> </html>

View File

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

View File

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