Create a custom scrollbar with CSS

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.

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