MAUI Blazor表头固定、表体滚动及滚动条禁用问题

针对你遇到的MAUI Blazor环境下Bootstrap表格滚动异常问题，核心原因是MAUI的BlazorWebView自带原生滚动机制，会覆盖你设置的CSS滚动规则。以下是无需拆分组件的解决方案：

1. 抑制MAUI宿主的全局滚动 #

首先在Blazor页面的最外层容器设置强制占满视口并隐藏溢出，避免MAUI原生滚动触发：

<div style="height: 100vh; overflow: hidden; display: flex; flex-direction: column;">
    <!-- 这里放你表头上方的关联元素（无需拆分） -->
    <div class="p-2 bg-secondary text-white">
        <!-- 示例：搜索框、操作按钮等关联内容 -->
        <input type="text" placeholder="筛选内容" class="form-control w-25 d-inline-block" />
        <button class="btn btn-light ms-2">刷新</button>
    </div>

    <!-- 表格区域 -->
    <div style="flex: 1; overflow: hidden;">
        <!-- 固定表头 -->
        <table class="table table-bordered mb-0" style="table-layout: fixed; width: 100%;">
            <thead class="sticky-top bg-white">
                <tr>
                    <th style="width: 25%;">ID</th>
                    <th style="width: 35%;">名称</th>
                    <th style="width: 40%;">描述</th>
                </tr>
            </thead>
        </table>

        <!-- 可滚动表体容器 -->
        <div style="height: calc(100vh - 100px); overflow-y: auto;">
            <table class="table table-bordered mt-0" style="table-layout: fixed; width: 100%;">
                <tbody>
                    @for (int i = 0; i < 50; i++)
                    {
                        <tr>
                            <td>@i</td>
                            <td>测试名称@i</td>
                            <td>这是一段测试描述内容，用于填充表格行@i</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

2. 关键配置说明 #

• Flex布局：外层用flex-direction: column让上方关联元素和表格区域自动分配视口空间，避免页面整体溢出。
• 固定表头：用Bootstrap的sticky-top类让表头固定在顶部，同时给表头表格设置table-layout: fixed保证列宽稳定。
• 表体滚动：通过calc(100vh - 100px)计算表体容器高度（100px是上方关联元素+表头的总高度，根据实际情况调整），设置overflow-y: auto仅让表体垂直滚动。
• 列宽对齐：两个表格都设置table-layout: fixed并给每列指定宽度，确保表头和表体列完全对齐。

3. 彻底禁用MAUI原生滚动（可选） #

如果上述CSS设置仍有原生滚动条出现，直接在MAUI项目的MainPage.xaml中禁用BlazorWebView的原生滚动：

<BlazorWebView HostPage="wwwroot/index.html" EnableScrolling="False">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

这样就能完全由Blazor页面内的CSS控制滚动，同时保留表头上方元素和表体的关联逻辑，无需拆分组件。

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