Сделать так, чтобы прокрутка всегда отображалась при выборе материала

Question

Я работаю в проекте Angular 9, используя Материал (таблицы стилей S CSS).

У меня есть выбор материала, есть много вариантов, поэтому вы можете их прокручивать . Проблема в том, что если вы не знали, что есть другие варианты, или не попробовали прокрутить, вы не заметите, что список расширяется. Я хочу решить эту проблему, постоянно отображая полосу прокрутки.

Как сделать так, чтобы прокрутка всегда была видимой в элементе выбора материала. Думаю, я использую какой-то стиль. Я также использую таблицы стилей s css.

Вот что теперь отображается:

Я хочу, чтобы прокрутка всегда отображалась , а не только когда вы буквально прокручиваете элемент вниз:

Я также быстро https://stackblitz.com/edit/always-show-scroll-material-select

Answer 1

Прокрутка не отображается, потому что вы, вероятно, используете трекпад или мышь magi c. Использование внешней мыши покажет полосу прокрутки, просто установив для параметра «переполнение» значение «авто» или «прокрутка».

Если вы хотите также отображать полосу прокрутки с помощью трекпада или мыши c magi, вы все равно можете сделайте это с помощью псевдоэлемента -webkit-scrollbar

В этом посте также объясняется: Предотвращение скрытия полос прокрутки для пользователей трекпада MacOS в WebKit / Blink

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

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