如何在 Blazor 服务器端处理 window 或 body onscroll？

Question

我需要在我的 Blazor 服务器端应用程序中捕获 window 或 body 的 onscroll 事件。现在，我使用脚本文件实现了这一点，我在其中捕获事件并在其中执行我的逻辑。

对于window:

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

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

如何捕获 body 标签的 onscroll 事件？在 Blazor 服务器端 body 位于 _Host.cshtml 文件中，我无法使用 @onscroll。

对于body:

<body onscroll="myFunction()">

上面的方法有效，但我在使用 blazor 时对这个实现不满意。

请协助说明如何仅使用 C# 实现此功能。

Answer 1

对我来说，您的 _Host.cshtml 文件似乎不是 razor 组件文件，因此您将无法在代码块中实现该逻辑（查看 .razor 扩展名）。

Answer 2

@Mister Magoo 感谢您为我指明正确的方向。我使用 IntersectionObserver.

使它起作用

这是我所做的，

我删除了对 window.onscroll = function() {myFunction()}; 的引用，并从 <body> 标签中删除了 onscroll="myFunction()"。

然后在 Index.razor 组件

中从 OnAfterRenderAsync 调用我的 IntersectionObserver 函数

@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));
}

Answer 3

Index.html 是所有 Blazor 应用程序的入口点。这是一个标准的 HTML 文件。这将呈现为 document 具有滚动事件。 您必须使用 JS Interop 调用 JS 代码来滚动或通知您的滚动事件代码。

这里是Nuget package which can handle it for you. See it in action using demo app.

注意：这是使用 .NET 5，因此不适用于面向 .NET Core 3.1 的 Blazor 应用程序。

如何在 Blazor 服务器端处理 window 或 body onscroll？

How to handle window or body onscroll in Blazor server side?

c#

blazor

blazor-server-side

.net-core-3.1

asp.net-core-3.1