[Fixed] Removing Scroll Webkit css classes for mat-select component only

Issue

I have overridden webkit scroll classes in global.scss. But for mat-select it always stays on the screen whenever there is scroll, despite overflow: auto is set. That is because of overriden scrollbar classes.

Now custom scroll bar is coming to right side of mat-select and looks very ugly. I want to hide it and keep scrolling. All the other answers are related to non-angular.

I don’t know how to use ng-deep here properly.

This is my _globals.scss

body {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 10px;
  }

}

I tried several option in my custom select component like & lot of combinations.

body {
  ::-webkit-scrollbar {
    display: none !important;
  }
}

how can I acheive this in component scss itself limited to that only if I use

::ng-deep {
  ::-webkit-scrollbar {
    display: none !important;
  }
}

then it works, but obiviously this is bleeding everywhere! scrollbars gone for everyone once I visit my select component.

Angular v11

Solution

Ok, I ended up achieving this is using ‘panel-class’ of mat-select.

In my component template I provided it as ‘.panelClass’ to mat-select.

In SCSS

::ng-deep {
  .panelClass {
    &::-webkit-scrollbar {
      display: none !important;
    }
  }
}

Done! Scrollbar hidden and scrolling works for mat-select!