Изображения
Первое -> открытие чата
Второе -> открытие сайта с длинной прокруткой
Третье -> возвращение назад в чат
Отмечаемся по F12 с помощью * {outline: red 1px
Мои настройки:
- Язык: C# .net 8.0
- Платформа: Blazor Server
- Режим рендеринга: InteractiveServer
Это происходит только тогда, когда я перехожу на страницу документации. Когда я захожу в чат, в котором есть полоса прокрутки, полоса прокрутки автоматически исчезает, как только я захожу в чат, который еще не достиг размера полосы прокрутки\
Я также попробовал добавить функцию сброса прокрутки, которую я вызывался через 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
Мобильная версия