动画期间 mat-sidenav 滚动条的可见性答案

【问题标题】：mat-sidenav scrollbar visibility during animation动画期间 mat-sidenav 滚动条的可见性
【发布时间】：2019-05-30 18:56:06
【问题描述】：

我正在使用 mat-sidenav 并设法设置了一个非常基本的，它将位于左侧并打开和关闭足以显示 mat-icons。这部分很好，可以按预期工作。我已经通过 css 包含了用于打开和关闭的幻灯片动画。现在的问题是动画期间滚动条的可见性。我理解为什么滚动存在，因为这是因为我使用 ngif 来隐藏 mat-icon 之后的内容，所以当它处于部分关闭状态时，图标的字母/描述不会在最后看到......然后当动画通过切换功能发生时插入 - 我对这里存在的滚动条非常满意。我的问题是使滚动条不可见但仍然存在；原因是菜单也可以根据权限垂直增长，我希望用户能够滚动，即使他们看不到滚动条。现在这不是我在研究后看到的新问题 - 但是我不明白如何将我在以下链接中阅读的内容应用于我的问题。这与我在 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;
}

【问题讨论】：

所以您希望滚动，但不想让滚动条可见？
是的，没错
我能想到的只是在::-webkit-scrollbar 上使用width: 0px;，但根据w3schools，：Custom scrollbars are not supported in Firefox or IE/Edge.
嗯，让我试试看。然后从那里发表评论
在 chrome 上进行了测试。还是不行。一定有什么我错过了

标签： css angular

【解决方案1】：

如果有人遇到同样的问题，这对我很有用

::ng-deep .mat-drawer-inner-container {
     overflow: visible!important;
}

【讨论】：

【解决方案2】：

您的 CSS 没问题，只需将其添加到 style.css 文件中

甚至尝试：

 *{ overflow: hidden !important; }

在style.scss

【讨论】：