Как обрабатывать окно или тело onscroll на стороне сервера Blazor?

Мне нужно зафиксировать onscroll событие window или body в моем приложении на стороне сервера Blazor. Прямо сейчас я реализовал это с помощью файла сценария, в котором я фиксирую событие и выполняю там свою логику.

Для window:

window.onscroll = function() {myFunction()};

function myFunction() {
  //  ... my logics here
}

Как зафиксировать onscroll событие тега body? На стороне сервера Blazor body находится в _Host.cshtml файле, где я не могу использовать @onscroll.

Для body:

<body onscroll="myFunction()">

Вышеупомянутый вариант работает, но я не доволен этой реализацией при использовании Blazor.

Пожалуйста, помогите, как реализовать это исключительно на C #.


c# blazor asp.net-core-3.1 blazor-server-side .net-core-3.1
person fingers10    schedule 31.12.2019    source источник
comment
Хотя вы не можете использовать Blazor в теле, вы можете установить тело без прокрутки и использовать свой компонент в качестве прокручиваемого элемента, затем вы можете использовать @onscroll в своем компоненте, но имейте в виду, что это очень разговорчивое событие и плохо сказывается на производительности. Какова здесь конечная цель - зачем вам нужно слушать события прокрутки? Возможно, есть другой способ сделать то, что вам нужно ...   -  person Mister Magoo    schedule 31.12.2019
comment
Я разрабатываю страницу с параллаксом, и мне нужно активировать класс css на основе разделов, когда пользователь прокручивает. Это цель   -  person fingers10    schedule 31.12.2019
comment
Это должно работать с прокручиваемым контейнером в Blazor, но производительность будет очень плохой. Вы рассматривали возможность использования наблюдателя перекрестков?   -  person Mister Magoo    schedule 31.12.2019
comment
Иногда вам нужно использовать правильный инструмент для работы, а прямой доступ к Dom просто пока недоступен в Blazor, поэтому JavaScript оказывается правильным инструментом.   -  person Mister Magoo    schedule 31.12.2019
comment
Спасибо за информацию и подсказку. Я посмотрю на наблюдателя перекрестка.   -  person fingers10    schedule 31.12.2019

Ответы (3)


arrow_upward
1
arrow_downward

Index.html - это точка входа во все приложение Blazor. Это стандартный HTML-документ. Это будет отображаться как document, в котором есть события прокрутки. Вы должны использовать JS Interop для вызова кода JS для прокрутки или уведомления вашего кода о событиях прокрутки.

Вот пакет Nuget, который может справиться с этим за вас. . Посмотрите на это в действии, используя демонстрационное приложение.

Примечание. Здесь используется .NET 5, поэтому приложение Blazor, ориентированное на .NET Core 3.1, работать не будет.

person Major    schedule 27.10.2020

arrow_upward
0
arrow_downward

для меня похоже, что ваш файл _Host.cshtml не является файлом компонента бритвы, и поэтому вы не сможете реализовать эту логику в блоке кода (глядя на расширение .razor).

person Kasper Lagowski    schedule 31.12.2019
comment
Так что единственный способ - использовать javascript? Текущая реализация, которую я показал выше? - person fingers10; 31.12.2019
comment
@ finger10 Да, но вы можете использовать JS interopt для кодирования логики на C # - person agua from mars; 31.12.2019
comment
@aguafrommars, где я должен вызвать js-метод с помощью JS-взаимодействия? из какого компонента? поскольку тело не является компонентом, откуда я могу позвонить? - person fingers10; 31.12.2019
comment
Добавьте сценарий .js в папку wwwroot и вставьте экземпляр IJSRuntime в компонент, который вы хотите использовать. Документ - person agua from mars; 31.12.2019

arrow_upward
-1
arrow_downward

@ Мистер Магу Спасибо, что указали мне правильное направление. Я заставил это работать, используя IntersectionObserver.

Вот что я сделал,

Я удалил ссылку на window.onscroll = function() {myFunction()};, а также удалил onscroll="myFunction()" из тега <body>.

А затем вызвала мою IntersectionObserver функцию из OnAfterRenderAsync в компоненте Index.razor

@code{

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("highlightMenu");
        }
    }

}

IntersectionObserver функция:

function myFunction() {
    const sections = document.querySelectorAll('.page-section,.site-header');
    const config = {
        rootMargin: '-55px 0px -85%'
    };

    let observer = new IntersectionObserver(function
        (entries, self) {

        entries.forEach(entry => {
            if (entry.isIntersecting) {
                intersectionHandler(entry);
            }
        });
    }, config);

    sections.forEach(section => observer.observe(section));
}
person fingers10    schedule 18.01.2020