Blazor滚动模糊元素时scrollTop始终为0的问题求助

你遇到的核心问题大概率是页面的滚动容器不是window/document，而是Blazor布局里的某个内部容器。Blazor默认的MainLayout通常会把内容放在带overflow:auto的div里，导致滚动行为发生在这个div上而非整个浏览器窗口，这时候你用window或document相关的scrollTop自然会返回0。

排查步骤 #

• 打开浏览器开发者工具，滚动页面时，在Elements面板逐个检查元素，看哪个元素的scrollTop值在变化（可以在Console里输入document.getElementById('容器id').scrollTop实时查看）。
• 或者直接查看CSS：找设置了overflow: auto或overflow: scroll的元素，这类元素就是滚动容器。

解决方法 #

1. 定位正确的滚动容器 #

比如默认Blazor项目的MainLayout里通常有这样的结构，给滚动容器加个id：

<div class="page" id="scroll-container">
    <div class="main">
        <article class="content px-4">
            @Body
        </article>
    </div>
</div>

对应的CSS一般会给.page或.main设置height: 100vh和overflow-y: auto，这就是实际的滚动容器。

2. 修改JS函数获取正确的scrollTop #

把原来的JS代码里的window/document相关对象换成这个容器元素：

function updateBackgroundBlur() {
    const scrollContainer = document.getElementById('scroll-container');
    const scrollTop = scrollContainer.scrollTop;
    // 根据滚动距离计算模糊值，示例逻辑：滚动100px时模糊度到5，上限5
    const blurValue = Math.min(scrollTop / 100, 5);
    document.getElementById('target-bg').style.filter = `blur(${blurValue}px)`;
}

3. 绑定滚动事件到正确容器 #

在Blazor组件里，给滚动容器绑定滚动事件而非window：

@inject IJSRuntime JSRuntime

<div class="page" id="scroll-container" @onscroll="HandleScroll">
    <!-- 页面内容 -->
</div>

@code {
    private async Task HandleScroll()
    {
        await JSRuntime.InvokeVoidAsync("updateBackgroundBlur");
    }
}

额外注意点 #

• 如果你给body设置了overflow: hidden，或者给html, body设置了height: 100%，会强制滚动行为转移到内部容器，一定要确认这一设置。
• 确保在Blazor组件渲染完成后再初始化滚动监听，比如在OnAfterRenderAsync方法里调用JS绑定事件，避免元素未加载导致获取不到容器。

内容的提问来源于stack exchange，提问作者Samih EL SAKHAWI