am trying to hide scrollbar from angular material sidenav

Question

am trying to hide the scrollbar from the side while keeping the ability to scroll

StackBlitz Demo: https://stackblitz.com/edit/github-443roq

Answer 1

Demo to do this kind of things, best way to open developer console and find inspected element then override css on this element in style.css if it is 3rd party library. For your situation, your scroll element is mat-drawer-inner-container then to hide it use webkit-scrollbar pseudo code. put below code in style.css

.mat-drawer-inner-container::-webkit-scrollbar {
    display: none;
}

Answer 2

In my case (Angular 13 ) code :

.mat-drawer-inner-container::-webkit-scrollbar {
display: none;

}

have to be used in styles.scss , no effect if used in app.component.scss

Answer 3

@jhon response dont work for me (mozilla firefox browser) the demo exemple dont work neither (but work on chrome) the way i implemented it was like this : (thanks to this stackoverflow post )

add a tag to your sidenav:

<mat-sidenav-container>

<mat-sidenav #sidenav class="mat-elevation-z8" [mode]="sidebarMode" [opened]="sidebarIsOpen">
    <mat-nav-list>
        // your list for sidenav
    </mat-nav-list>

//rest of the code

notify the need of #sidenav

then in your template component :

import { AfterViewInit, Renderer2, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

export class Template implements ...<other-implements> AfterViewInit{

@ViewChild('sidenav')
sidenav!: MatSideNav


...someCode...

ngAfterViewInit(): void {

    this.renderer.setStyle(this.sidenav._content.nativeElement,  'scrollbar-width', 'none')
  }