Angular - стилизация полосы прокрутки внутри списка матов в дочернем компоненте

Question

Я не могу нацелить полосу прокрутки в этом дочернем компоненте, где у меня есть mat-list и 2 раздела с определенной высотой и overflow-y:auto.

https://stackblitz.com/edit/angular-chtqjk-vdwwnd

в файле css, внизу у вас есть все мои попытки нацелиться на 2 полосы прокрутки, не можете найти нужные селекторы!

Может ли кто-нибудь просветить меня? спасибо

Answer 1

Следующее работает:

#visibilityContainer ::ng-deep ::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

#visibilityContainer ::ng-deep ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.26) !important;
}

Обратите внимание, что селектор ::webkit-scrollbar-track должен быть отделен от селектора #visibilityContainer, поскольку полоса прокрутки фактически не находится на этом элементе.

Вот вилка из StackBlitz

EDIT: Вам также нужно убедиться, что вы стилизовали thumb, например:

#visibilityContainer ::ng-deep ::-webkit-scrollbar-thumb {
    background: blue; 
}