Полоса прокрутки на моем сайте, хотя элементов нетHtml

Программисты Html
Ответить
Anonymous
 Полоса прокрутки на моем сайте, хотя элементов нет

Сообщение Anonymous »

У меня есть приложение для чата. Я хочу всегда прокручивать страницу вниз. Когда я перехожу на страницу, где могу прокрутить вниз, а затем вернуться в чат, полоса прокрутки вообще не обновляется.
Изображения
Первое -> открытие чата
Второе -> открытие сайта с длинной прокруткой
Третье -> возвращение назад в чат
Отмечаемся по F12 с помощью * {outline: red 1px
Мои настройки:
  • Язык: C# .net 8.0
  • Платформа: Blazor Server
  • Режим рендеринга: InteractiveServer
I не вижу ни одного элемента, который мог бы вызвать эту полосу прокрутки. Я ничего не нашел по F12 и не смог ничего увидеть с помощью * { Outline: Red 1px } \
Это происходит только тогда, когда я перехожу на страницу документации. Когда я захожу в чат, в котором есть полоса прокрутки, полоса прокрутки автоматически исчезает, как только я захожу в чат, который еще не достиг размера полосы прокрутки\
Я также попробовал добавить функцию сброса прокрутки, которую я вызывался через blazor и напрямую через консоль JS, что не работало
function recalculateScrollbar() {
document.body.style.overflow = 'hidden'; // Temporarily hide scrollbars
document.body.offsetHeight; // Force a reflow
document.body.style.overflow = ''; // Restore default overflow
}

Код
Сомневаюсь, что этот код поможет, но если вы ищете что-то конкретное, вы можете взять это для справки:
Код для чата (сокращенный):
@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);
}

}

Код документации (сокращенный):
@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 */
}

}


Подробнее здесь: https://stackoverflow.com/questions/793 ... o-elements
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»