Полоса прокрутки - один из наиболее игнорируемых компонентов пользовательского интерфейса, которые не используются многими веб-сайтами для повышения удобства работы своих пользователей. По умолчанию во всем HTML, когда содержимое веб-сайта превышает высоту области просмотра, справа автоматически появляется полоса прокрутки, точно такая же, как на большинстве сайтов.
Полоса прокрутки по умолчанию выглядит неплохо, но может быть и лучше. 😊
html::-webkit-scrollbar {
width: 16px;
height: 16px;
}
html::-webkit-scrollbar-thumb {
background: #434343;
border-radius: 16px;
box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
background: linear-gradient(90deg,#434343,#434343 1px,#111 0,#111);
}
Стиль применяется к следующему селектору псевдоэлементов.
#fake-window::-webkit-scrollbar {
width: 16px;
height: 16px;
}
Чтобы полоса прокрутки отображала только одну кнопку с каждой стороны, необходимо применить следующий стиль.
https://esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar