如何在Blazor中仅针对特定页面禁用滚动溢出

我完全懂你的困扰：想在单个Blazor组件页面里禁用滚动，但组件内写的html, body { overflow: hidden; }完全没效果，全局加又会把整个站点的滚动都锁死。这其实是Blazor组件样式隔离机制导致的——组件的CSS默认只会作用于自身内部的DOM元素，没法直接修改全局的body样式。下面给你两个实用的解决方案：

方法1：用JS Interop控制全局body样式（兼容所有浏览器） #

这个方法通过Blazor的JS互操作，在组件加载时修改body的overflow属性，组件销毁时再恢复原样，不会影响其他页面的正常滚动。

步骤1：添加JS辅助函数 #

在你的wwwroot/site.js（或新建一个专属JS文件）里加入以下代码：

// 获取body当前的overflow样式
function getBodyOverflow() {
    return document.body.style.overflow || window.getComputedStyle(document.body).overflow;
}

// 设置body的overflow样式
function setBodyOverflow(value) {
    document.body.style.overflow = value;
}

记得在_Host.cshtml里引入这个JS文件（如果还没添加引用的话）。

步骤2：在目标组件里实现逻辑 #

在你要禁用滚动的Blazor组件代码里，注入IJSRuntime并处理生命周期：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<!-- 你的组件内容 -->

@code {
    private string _originalOverflow;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 保存body原来的overflow状态
            _originalOverflow = await JSRuntime.InvokeAsync<string>("getBodyOverflow");
            // 禁用滚动
            await JSRuntime.InvokeVoidAsync("setBodyOverflow", "hidden");
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    // 组件销毁时恢复滚动
    public async ValueTask DisposeAsync()
    {
        await JSRuntime.InvokeVoidAsync("setBodyOverflow", _originalOverflow);
    }
}

方法2：用CSS :has伪类（简洁高效，适合现代浏览器） #

如果你的用户都使用现代浏览器（Chrome 105+、Firefox 121+、Edge 105+），可以用CSS的:has伪类实现，完全不需要写JS代码。

步骤1：给组件根元素加独特类 #

在目标组件的根容器上添加一个专属类，比如no-scroll-container：

<div class="no-scroll-container">
    <!-- 你的组件内容 -->
</div>

步骤2：在全局site.css里添加条件样式 #

打开wwwroot/css/site.css，加入以下代码：

/* 当页面存在no-scroll-container元素时，禁用body滚动 */
body:has(.no-scroll-container) {
    overflow: hidden;
}

这样只要这个组件渲染在页面上，body就会自动禁用滚动；组件销毁后，滚动会自动恢复，操作起来非常简洁。

两种方法都能精准满足你的需求，根据你的浏览器兼容要求选择即可～

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