content/snippets/css/s/custom-scrollbar.md
Scrollbar styling is one of the longest-awaited features in CSS. While it's not officially supported, there are still ways to style scrollbars in certain browsers.
[!CAUTION]
Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers (Chrome, Edge, Safari).
In general, you can use the ::-webkit-scrollbar pseudo-element to style the scrollbar element, ::-webkit-scrollbar-track to style the scrollbar track (the background of the scrollbar), and ::-webkit-scrollbar-thumb to style the scrollbar thumb (the draggable element).
Putting everything together, you can create a style for the scrollbar like this:
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #4a7856;
border-radius: 12px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #70bceb;
border-radius: 12px;
}