Blazor WASM如何检测页面是否有可见垂直滚动条并订阅滚动事件

因为Blazor无法直接操作DOM，所以需要借助JS互操作来实现针对整个文档的滚动条检测和滚动事件订阅，以下是具体步骤：

一、编写JS辅助函数 #

在wwwroot/js目录下创建scrollUtils.js文件，添加以下代码：

// 检测是否存在可见垂直滚动条
export function hasVerticalScrollbar() {
    // 判断内容高度是否超过视口，且未隐藏滚动条
    return document.documentElement.scrollHeight > window.innerHeight && 
           window.getComputedStyle(document.documentElement).overflowY !== 'hidden';
}

let scrollHandler;

// 订阅文档滚动事件，接收Blazor组件的引用用于回调
export function subscribeToScrollEvent(dotNetRef) {
    scrollHandler = () => {
        // 获取当前滚动距离顶部的位置
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        dotNetRef.invokeMethodAsync('OnDocumentScrolled', scrollTop);
    };
    window.addEventListener('scroll', scrollHandler);
}

// 取消订阅滚动事件，避免内存泄漏
export function unsubscribeFromScrollEvent() {
    if (scrollHandler) {
        window.removeEventListener('scroll', scrollHandler);
    }
}

二、Blazor组件中实现逻辑 #

以Index.razor为例，注入IJSRuntime并调用JS函数：

@page "/"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<div style="height: 150vh; padding: 20px;">
    <h3>文档滚动检测演示</h3>
    <p>当前是否显示垂直滚动条: @hasScrollbar</p>
    <p>滚动距离顶部: @scrollTop px</p>
</div>

@code {
    private bool hasScrollbar;
    private int scrollTop;
    private IJSObjectReference? _scrollUtilsModule;
    private DotNetObjectReference<Index>? _dotNetRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 加载自定义JS模块
            _scrollUtilsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./js/scrollUtils.js");
            
            // 初始检测滚动条状态
            hasScrollbar = await _scrollUtilsModule.InvokeAsync<bool>("hasVerticalScrollbar");
            StateHasChanged();

            // 创建组件的DotNet引用，用于JS回调到Blazor方法
            _dotNetRef = DotNetObjectReference.Create(this);
            await _scrollUtilsModule.InvokeVoidAsync("subscribeToScrollEvent", _dotNetRef);
        }
    }

    // 标记为可被JS调用的方法，接收滚动位置参数
    [JSInvokable]
    public void OnDocumentScrolled(int scrollPosition)
    {
        scrollTop = scrollPosition;
        // 若页面内容动态变化，可在此重新检测滚动条状态
        // hasScrollbar = await _scrollUtilsModule.InvokeAsync<bool>("hasVerticalScrollbar");
        StateHasChanged();
    }

    // 组件销毁时清理资源，避免内存泄漏
    public async ValueTask DisposeAsync()
    {
        if (_scrollUtilsModule != null)
        {
            await _scrollUtilsModule.InvokeVoidAsync("unsubscribeFromScrollEvent");
            await _scrollUtilsModule.DisposeAsync();
        }
        _dotNetRef?.Dispose();
    }
}

关键说明 #

• 滚动条检测逻辑：同时判断内容高度是否超过视口、文档的overflowY属性是否未设置为hidden，确保结果准确。
• 事件订阅与清理：必须在组件销毁时取消滚动事件监听，否则会导致内存泄漏。
• 动态内容适配：如果页面内容是动态加载的，可在内容更新后重新调用hasVerticalScrollbar方法更新滚动条状态。

内容的提问来源于stack exchange，提问作者Andrea Montanari