Scrollbar with a bit of CSS easily

Let me explain what each part of the code does:

• ::-webkit-scrollbar: This pseudo-element targets the entire scrollbar. We set the width and height to 10px, and the background color to a light gray (#f5f5f5).

• ::-webkit-scrollbar-track: This pseudo-element targets the track of the scrollbar (the background area where the thumb moves). We set the background color to the same light gray as the scrollbar, and add a border radius to give it a rounded look.

• ::-webkit-scrollbar-thumb: This pseudo-element targets the thumb of the scrollbar (the moving part that you click and drag). We set the background color to a blue color (#337ab7), add a border radius to match the track, and add a 1px solid border to give it a slight outline.

• ::-webkit-scrollbar-thumb:hover: This pseudo-element targets the thumb when it's hovered over. We change the background color to a darker blue (#23527c) to give it a nice hover effect.

/* Customize the scrollbar */
::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
  height: 10px; /* Set the height of the scrollbar */
  background-color: #f5f5f5; /* Set the background color of the scrollbar */
}

/* Customize the scrollbar track */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* Set the background color of the scrollbar track */
  border-radius: 10px; /* Add a border radius to the scrollbar track */
}

/* Customize the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #337ab7; /* Set the background color of the scrollbar thumb */
  border-radius: 10px; /* Add a border radius to the scrollbar thumb */
  border: 1px solid #f5f5f5; /* Add a border to the scrollbar thumb */
}

/* Hover effect for the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: #23527c; /* Change the background color of the scrollbar thumb on hover */
}

Note that these pseudo-elements only work in WebKit-based browsers (such as Safari). If you need to support other browsers, you may need to use different approaches.