在Blazor中，可以使用JavaScriptInterop和Intersection Observer API来检测组件何时显示在屏幕上。

下面是一个示例代码，演示了如何使用Intersection Observer API来检测组件何时显示在屏幕上：

1. 创建一个名为IntersectionObserverMixin.cs的文件，并添加以下代码：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;

public class IntersectionObserverMixin : ComponentBase, IDisposable
{
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }

    protected ElementReference ElementRef { get; set; }

    private IJSObjectReference _intersectionObserver;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _intersectionObserver = await JSRuntime.InvokeAsync(
                "import", "./js/intersection-observer.js"
            );

            await _intersectionObserver.InvokeVoidAsync(
                "observe", ElementRef, DotNetObjectReference.Create(this)
            );
        }
    }

    [JSInvokable]
    public void OnIntersection(object[] args)
    {
        bool isIntersecting = (bool)args[0];
        if (isIntersecting)
        {
            // Component is visible on the screen
            // Add your logic here
        }
        else
        {
            // Component is not visible on the screen
            // Add your logic here
        }
    }

    public void Dispose()
    {
        _intersectionObserver?.DisposeAsync();
    }
}

2. 创建一个名为intersection-observer.js的JavaScript文件，并添加以下代码：

export function observe(element, dotnetHelper) {
    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0
    };

    const callback = (entries, observer) => {
        entries.forEach(entry => {
            dotnetHelper.invokeMethodAsync('OnIntersection', entry.isIntersecting);
        });
    };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(element);
}

3. 在需要检测组件是否显示在屏幕上的组件中，使用IntersectionObserverMixin作为基类，并在组件中添加ElementRef属性：

@inherits IntersectionObserverMixin


    

通过继承IntersectionObserverMixin并注入IJSRuntime，我们可以在组件的OnAfterRenderAsync方法中动态加载JavaScript文件和创建Intersection Observer实例。

在OnIntersection方法中，我们可以根据isIntersecting参数的值来判断组件是否可见，并在需要的情况下执行相应的逻辑。

请确保将intersection-observer.js文件放置在正确的位置，并在项目中包含它。