CSS: Styling Scrollbar Example

Updated: July 21, 2021 By: A Goodman Post a comment

For WebKit browsers (Google Chrome, Microsoft Edge, Safari, etc), you can customize the style of a scrollbar such as background color, width, thumb, tract… by using pure CSS.

Example

Preview:

The Code:

<html lang="en">
  <head>
    <title>Kindacode.com</title>
    <style>
      body {
        height: 200vh;
      }

      /* Styling the scrollbar */
      ::-webkit-scrollbar {
        width: 20px;
        background: lemonchiffon;
      }

      /* Styling the track of the scrollbar */
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
      }

      /* Styling the thumb (the draggable scrolling handle) */
      ::-webkit-scrollbar-thumb {
        background: orange;
        border-radius: 10px;
      }

      /* The thumb on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: red;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>

That’s it. Happy coding!