mat-select: Hide scrollbar but enable scrolling

Question

I am creating a webpage using angular 8 with material design. I am using mat-select to dsiaplay various options. But it shows scrollbar as max-height of mat-select is 256px. I want to hide the scrollbar but enable the scrolling feature. I do not want to increase the height of mat-select-panel. I have tried the following code but no luck so far.

trial 1::

    ::ng-deep {
    .mat-select-panel-wrap {
      overflow: hidden !important;
    }
    .mat-select-panel {

      overflow-y: auto !important;
    }
  }

trial 2::

::-webkit-scrollbar {
  display: none !important;
  background: transparent !important;
}

Answer 1

You need to change webkit-scrollbar-track instead of webkit-scrollbar

Try this:

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
}