Scrollleiste auf meiner Website, obwohl es keine Elemente gibt ⇐ C#

[Guest]

Ich habe eine Chat-Anwendung. Ich möchte immer zum Ende der Seite scrollen. Wenn ich zu einer Seite gehe, auf der ich nach unten scrollen und später zu meinem Chat zurückkehren kann, wird die Bildlaufleiste überhaupt nicht aktualisiert.
Bilder
Erstens -> Öffnen des Chats
Zweitens -> Öffnen einer langen scrollbaren Website
Drittens -> Zurückgehen zum Chat
Einchecken in F12 mit * {outline: red 1px
Mein Setup:

• Sprache: C# .net 8.0
  Framework: Blazor Server
• Rendermode: InteractiveServer

Ich kann kein Element sehen das würde diese Bildlaufleiste verursachen. Ich habe in F12 nichts gefunden und konnte auch nichts sehen mit * { outline: red 1px } \
Es passiert nur, wenn ich auf eine Dokumentationsseite gehe. Wenn ich zu einem Chat gehe, der eine Bildlaufleiste hat, verschwindet die Bildlaufleiste automatisch, sobald ich zu einem Chat gehe, der noch nicht die Größe der Bildlaufleiste erreicht hat.\
Ich habe auch versucht, eine Funktion zum Zurücksetzen der Bildlaufleiste hinzuzufügen über Blazor und direkt über die JS-Konsole aufgerufen, was nicht funktioniert hat

Code: Select all

function recalculateScrollbar() {
document.body.style.overflow = 'hidden'; // Temporarily hide scrollbars
document.body.offsetHeight;             // Force a reflow
document.body.style.overflow = '';      // Restore default overflow
}

Code
Ich bezweifle, dass dieser Code hilft, aber wenn Sie nach etwas Bestimmtem suchen, können Sie diesen nehmen als Referenz:
Code für Chat (gekürzt):

Code: Select all

@page "/chat/{id}"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime
@inject NavigationManager navMan

Live Example

@if (currentChat == null)
{
Not found
}
else
{

Here is the Chat @currentChat.name

@foreach(var item in displayedChatItems)
{
/* Display Item */
}
}






function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}

function scrollToElement(elementId) {
var element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}

function recalculateScrollbar() {
document.body.style.overflow = 'hidden'; // Temporarily hide scrollbars
document.body.offsetHeight;             // Force a reflow
document.body.style.overflow = '';      // Restore default overflow
}



@code {

// Site-Functions
private void ScrollToBottom(int delay = 200)
{
Task.Run(async() =>
{
await Task.Delay(delay);

await JSRuntime.InvokeVoidAsync("recalculateScrollbar");
//await JSRuntime.InvokeVoidAsync("scrollToBottom"); would scroll all the way to the bottom
await JSRuntime.InvokeVoidAsync("scrollToElement", "bottom-element");
});
}

protected override async Task OnInitializedAsync()
{
/* Load Chat */
}

protected override void OnAfterRender(bool firstRender)
{
ScrollToBottom(0);
}

}

Code für Dokumentation (gekürzt):

Code: Select all

@page "/docs/{id}"
@rendermode InteractiveServer


.custom-pagewrap{
width: 80%;
margin: 0 auto 0 2rem;
}


Documentation

@if (Documentation == null)
{

Not found
}
else
{



}

@code {
[Parameter]
public string id { get; set; }

private VDocument Documentation { get; set; }

protected override void OnInitialized()
{
Documentation = /* Loaded from API */
}

}