Scrollbar on my website although there are no elements

I have a chat application. I want to always scroll to the bottom of the page. When i go to a page where i can scroll down and later then go back to my chat, the scrollbar does not get updated at all.

Pictures

First -> opening the Chat

Second -> opening a long scrollable site

Third -> going back to the chat

Checking in F12 with * {outline: red 1px}

My Setup:

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

I cant see any element that would cause this scrollbar. I have not found anything in F12 & i could neither see anything with * { outline: red 1px } \

It only happens when i go to a documentation page. When i go to a chat that has a scrollbar then the scrollbar automatically dissapears once i go to a chat that hasnt yet reached scrollbar size\

I also tried adding adding a reset scroll function which i called over blazor & directly over JS Console, which didnt work

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

Code

I doubt that this code will help, but if you are looking for something specific you can take this as a reference:

Code for Chat (shortened):

@page "/chat/{id}"@rendermode InteractiveServer@inject IJSRuntime JSRuntime@inject NavigationManager navMan<PageTitle>Live Example</PageTitle>@if (currentChat == null){<p>Not found</p>}else{<h3 style="text-align: center; margin-bottom: 1rem">Here is the Chat @currentChat.name</h3><div class="chat-area">    @foreach(var item in displayedChatItems)    {        /* Display Item */    }}<ChatBarComponent Send="@ChatBarSend" LockBind="@LockedChatbar" easySend="true"/><div id="bottom-element"></div><script>    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    }</script>@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 for Documentation (shortened):

@page "/docs/{id}"@rendermode InteractiveServer<style>    .custom-pagewrap{        width: 80%;        margin: 0 auto 0 2rem;    }</style><PageTitle>Documentation</PageTitle>@if (Documentation == null){<p>Not found</p>}else{<div class="custom-pagewrap"><MarkdownDisplayComponent Markdown="@Documentation.markdown"/></div>}@code {    [Parameter]    public string id { get; set; }    private VDocument Documentation { get; set; }    protected override void OnInitialized()    {        Documentation = /* Loaded from API */    }}