Make Scroll Always Show In Material Select - css

Question

I'm working in an Angular 9 project, using Material (SCSS stylesheets).
I have a Material select, there's many options and so you're able to scroll through them. The problem is, unless you knew there were other options, or happened to try a scroll, you wouldn't know the list extends. I want to resolve this by having the scroll bar always show.
How can I make the scroll always be visible in the material select element. I'm guessing I'll use some sort of style. I'm also using scss stylesheets.
Here's what shows now:
I want the scroll to always show, not just when you literally scroll down the element:
I also make a quick https://stackblitz.com/edit/always-show-scroll-material-select

Answer 1

The scroll is not showing because you are probably using the trackpad or a magic mouse. Using an external mouse will show the scrollbar just setting "overflow" to "auto" or "scroll".
If you want to show also the scrollbar using the trackpad or the magic mouse, you can still do it using the -webkit-scrollbar pseudo-element
In this post is also explained:
Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
In your particular case you could achieve this using these css lines:
::ng-deep .mat-select-panel::-webkit-scrollbar {
-webkit-appearance: none;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
width: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
height: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}