Blazor Server使用Blazorise UI时页面出现双滚动条该如何移除？

问题原因 #

双滚动条是因为页面有两个DOM元素同时触发了纵向滚动规则：通常是元素和Blazorise默认生成的布局内容元素，两者高度超出视口后都默认产生了滚动条。你之前直接把全局overflow改成hidden会直接禁止所有元素滚动，所以页面无法拖动。

解决步骤 #

1. 先修改site.css中html,body的样式配置，禁用根节点的纵向滚动：

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    /* 替换原有min-height和height配置 */
    height: 100%;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
}

2. 修改组件内的自定义样式，仅让右侧内容区域支持纵向滚动：

#mountainTheme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('./images/pexels-sagui-andrea-618833.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* 替换原有height:100% */
    height: 100vh;
}

/* 新增内容区滚动规则 */
#mountainTheme .b-layout-content {
    overflow-y: auto;
    height: 100vh;
}

#mountainTheme .b-layout-sider {
    background: rgba(0, 0, 0, 0.4) !important;
    color: white !important;
    padding: 1rem;
    width: 18rem;
    display: block;
    /* 可选：侧边栏内容过长时内部滚动，不影响主页面 */
    overflow-y: auto;
}

3. 可选优化：给Blazorise的根Layout组件添加Scrollable="false"参数，禁用组件自带的全局滚动逻辑，避免样式冲突：

<Layout Sider="true" Scrollable="false">
    <!-- 原有内容保持不变 -->
</Layout>

调整后只有右侧内容区域会出现滚动条，侧边栏如果菜单项超出高度会在内部单独滚动，不会出现双滚动条问题。

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