CODEWITHSUNDEEP
angularangular-material
user9714833
user9714833

Reputation:

am trying to hide scrollbar from angular material sidenav

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

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

enter image description here

Upvotes: 0

Views: 11004

Answers (3)

Jack The Grim
Jack The Grim

Reputation: 11

@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')
  }

Upvotes: 0

John
John

Reputation: 74

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

Upvotes: 4

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

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

Upvotes: 7

Related Questions