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

Question

I am working with the mat-sidenav and have managed to setup a very basic one that will sit on the left side and open and close just enough to show the mat-icons. This part is fine and working as expected. I have included the slide animation via css for open and close. Now the problem is the visibility of the scrollbar during the animation. I understand why the scroll exists as this is because I am using an ngif to hide content after the mat-icon so when it is in partial closed state the letters/description of the icon does not peek on the end...this is then inserted as the animation takes place through a toggle functionality - I am perfectly fine with the scrollbar existing here. My problem is with making the scrollbar invisible yet still there; the reason is that the menu could also grow vertically depending on permissions and I would like the user to be able to scroll even though they can not see the scrollbar. Now this is not a new problem as I have seen after researching - however I do not understand how to apply what I have read in the below link to my problem. This along with something I have observed with css attribute overriding which I assume is because I am not using css scoping properly; makes up my issue.

Here is the link to the popular solution: Hide scroll bar, but while still being able to scroll

Inspecting the element I find the mat-drawer-inner-container is what has the overflow property and I find that any of the properties I set via css does not take. Below is a very stripped version of the html for debugging and is what I am working with to try and get this to work:

<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>

And here is the css I have tried. Have used basically exactly what was in the link for the solution but as I understand it you need to wrap the element which is responsible for the scroll in another element and make that one with overflow hidden and position relative. I have attempted this wrapping using mat-sidenav as the parent/wrapper and .mat-drawer-inner-container as the child/inner element:

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;
}

Now for the last part...let's assume I got the above correct. The css does not take. Is this because of css scoping? The .mat-drawer-inner-container stays the same - this is what I see after I inspect element:

.mat-drawer-inner-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

If I change the overflow element in the browser to lets say hidden just to see if it takes - it does remove the scrollbar(not what I want but a good way to test)...which should mean the way I am applying my css attributes is incorrect.

Yes I am quite new to frontend. Eager to learn though it needs to be as I work on the project.

Any advice?

EDIT: The requested screenshot. The inspected element

The css:

.mat-drawer-inner-container {
    overflow-x: hidden !important;
}

Answer 1

your CSS is ok just add it in style.css file

even try:

 *{ overflow: hidden !important; } 

in style.scss

Answer 2

if someone having same problem this is worked for me very well

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