HTML CSS Как сделать кастомный скроллбар
Проблема возникла с изменением скроллбара для блока (div). Использовал псевдоклассы и свойства:
::-webkit-scrollbar
scrollbar-width: 1200px;
Но все без успешно. Почему-то chrome не принимает данные изменения, а ошибку не выводит. Мой код SCSS:
.benefits {
height: 600px;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #FFFFFF;
}
}
Ответы (1 шт):
Автор решения: Locker
→ Ссылка
Для решения данного вопроса через -webkit я напрямую задал overflow-y:scroll стилизуемому блоку после чего стили применились.
Пример:
.benefits {
overflow-y: scroll;
}
.benefits::-webkit-scrollbar {
width: 5px;
background-color: rgba(26, 24, 47, 0.15);
border-radius: 5px;
height: 200px;
}
.benefits::-webkit-scrollbar-thumb {
background: #1A182F;
border-radius: 5px;
}