如何仅在某些页面中禁用溢出

Question

我正在从Visual Studio模板开始构建一款Blazor Server应用程序。

我只需要在一页上禁用溢出滚动条。 添加html，身体{溢出：隐藏; }在相对Blazor组件的CSS中不起作用。

该项目已经有一个站点。

Answer 1

我认为您可能可以将其应用于布局。这完全取决于您是否在托管CSHTML页面中做任何事情。

创建现有布局的副本，然后将样式应用于顶部page元素。

修改CSS文件中的page元素。

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow:hidden;
}

这是我的测试页面 - 我的新布局是baselayout.razor：

@layout BaseLayout
@page "/"

<div style="width:3000px" class="bg-black text-white">
<h1>Hello</h1>
</div>

@code {
}

Answer 2

您可以级联布局并从任何后代设置课程。这是一个简化的版本 - 实际上，您需要更仔细地控制如何设置类变量 - 但是您可以得到基本想法。请注意，@body不是HTML主体，而是大餐内容。

mainlayout.razor

<div class="@LayoutClass">
    <CascadingValue Value="this">
       @body
    </CascadingValue>
</div>

@code{
    public string LayoutClass = "layout-default";
}

anychild.razor

@code{
  [CascadingParameter]
  public MainLayout? Main { get; set; }

  void ChangeRootClass(){
     if (Main is not null) Main.LayoutClass = "AlternatePageClass";
  }
}

Answer 3

为了通过对模板进行较小的更改来解决您的问题，我建议默认情况下将滚动条关闭。

在中，mainlayout.razor.css将以下行添加到.page

.page {
    ...
    overflow: hidden;
}

＆lt; aCTECT/＆gt;元素需要以大小固定。该模板使用.top-Row使用高度：3.5REM;

在下面的同一文件中main add：

article {
    height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}

在此阶段默认情况下，条形符合条，＆lt; atrate/＆gt;元素占据了屏幕的其余部分。

要使页面滚动很容易，只需将内容包装在Div中：

<div class="h-100 overflow-auto">
    ...
</div>