我正在使用 mat-sidenav,并成功设置了一个非常基本的导航,它将位于左侧并打开和关闭足以显示垫子图标。这部分很好并且按预期工作。我已经通过 CSS 包含了用于打开和关闭的幻灯片动画。现在的问题是动画期间滚动条的可见性。我理解为什么滚动存在,因为这是因为我使用 ngif 隐藏 mat 图标后面的内容,因此当它处于部分关闭状态时,图标的字母/描述不会在末尾看到...这就是当动画通过切换功能发生时插入 - 我对这里存在的滚动条非常满意。我的问题是使滚动条不可见但仍然存在;原因是菜单也可以根据权限垂直增长,我希望用户能够滚动,即使他们看不到滚动条。现在,正如我在研究后看到的那样,这并不是一个新问题 - 但是我不明白如何将我在下面的链接中阅读的内容应用于我的问题。这以及我在 css 属性覆盖中观察到的一些内容,我认为这是因为我没有正确使用 css 作用域;弥补了我的问题。
以下是流行解决方案的链接: Hide scroll bar, but while still being able to scroll
检查该元素,我发现 mat-drawer-inner-container 具有溢出属性,并且我发现我通过 css 设置的任何属性都不会采用。下面是用于调试的 html 的一个非常精简的版本,也是我正在尝试让它工作的版本:
<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav mode="side" class="navbarComponent" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true">
<mat-nav-list>
<div id="menu" class="custom-selector">
<mat-list-item (click)="toggle()">
<mat-icon mat-list-icon class="noselect">menu</mat-icon>
</mat-list-item>
<div *ngIf="sidenavWidth > 6" class="sidenav-item noselect" style="background-color:#d56a00; padding:20px 30px 20px 10px; line-height:0px; text-align:left;">
<table width="100%">
<tr>
<td><img src="assets/images/avatar.png" width="100" height="100"></td>
<td id="avatar-table" style="color:#fff; vertical-align:top; padding:10px; line-height:15px;" class="col text-truncate"><p><b>Some name</b><br/>
Some other text</p>
</tr>
</table>
</div>
Will use ngfor to generate all the menus. This one is just one and the Html is just a menu with hardcoded values
<app-menu-list-item [sidenavWidth]="sidenavWidth" [subMenuEnabled]="subMenuEnabled"></app-menu-list-item>
</div>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
这是我尝试过的CSS。基本上完全使用了解决方案链接中的内容,但据我了解,您需要将负责滚动的元素包装在另一个元素中,并使该元素具有溢出隐藏和相对位置。我尝试使用 mat-sidenav 作为父/包装器和 .mat-drawer-inner-container 作为子/内部元素进行这种包装:
html, body {
height: 99%;
border: 1px solid red;
overflow:hidden;
}
mat-sidenav {
height: 100%;
width: 100%;
border: 1px solid green;
overflow: hidden;
position: relative;
}
.mat-drawer-inner-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: -15px;
border: 1px solid blue;
overflow: auto;
}
现在到最后一部分......让我们假设我的上述内容是正确的。 css不带。这是因为 css 作用域吗? .mat-drawer-inner-container 保持不变 - 这是我检查元素后看到的内容:
.mat-drawer-inner-container {
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
如果我将浏览器中的溢出元素更改为隐藏,只是为了看看它是否需要 - 它确实删除了滚动条(不是我想要的,而是一个很好的测试方法)...这应该意味着我的方式应用我的 css 属性是不正确的。
是的,我对前端很陌生。渴望学习,尽管在我从事该元素时需要这样做。
有什么建议吗?
编辑:请求的屏幕截图。 The inspected element
CSS:
.mat-drawer-inner-container {
overflow-x: hidden !important;
}
最佳答案
你的CSS就可以了,只需将其添加到style.css文件中即可
甚至尝试:
*{ overflow: hidden !important; }
在style.scss
关于css - mat-sidenav 动画期间滚动条的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54034933/